Button
Buttons let users take actions and make choices with a single tap.
Button API
Import
import Button from '@mui/base/Button';
// or
import { Button } from '@mui/base';Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| action | func | { current?: { focusVisible: func } } | A ref for imperative actions. It currently only supports focusVisible() action. | |
| disabled | bool | false | If true, the component is disabled. |
| focusableWhenDisabled | bool | false | If true, allows a disabled button to receive focus. |
| slotProps | { root?: func | object } | {} | The props used for each slot inside the Button. |
| slots | { root?: elementType } | {} | The components used for each slot inside the Button. Either a string to use a HTML element or a component. See Slots API below for more details. |
The
ref is forwarded to the root element.Slots
To learn how to customize the slot, check out the Overriding component structure guide.
| Name | Default class | Default HTML tag | Description |
|---|---|---|---|
| root | .MuiButton-root | props.href || props.to ? 'a' : 'button' | The component that renders the root. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.
CSS classes
These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.
| Global class | Description |
|---|---|
| .Mui-active STATE | State class applied to the root button element if active={true}. |
| .Mui-disabled STATE | State class applied to the root button element if disabled={true}. |
| .Mui-focusVisible STATE | State class applied to the root button element if focusVisible={true}. |