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';
Learn about the difference by reading this guide on minimizing bundle size.
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 |
disabled | bool | false | If |
focusableWhenDisabled | bool | false | If |
rootElementName | string | 'button' | The HTML element that is ultimately rendered, for example 'button' or 'a' |
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. |
ref
is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
Slot name | Class name | Default component | Description |
---|---|---|---|
root | .base-Button-root | props.href || props.to ? 'a' : 'button' | The component that renders the root. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Class name | Description |
---|---|
.base--active | State class applied to the root button element if active={true} . |
.base--disabled | State class applied to the root button element if disabled={true} . |
.base--focusVisible | State class applied to the root button element if focusVisible={true} . |