ButtonBase API
Import
import ButtonBase from '@mui/material/ButtonBase';
// or
import { ButtonBase } from '@mui/material';ButtonBase contains as few styles as possible.
It aims to be a simple building block for creating a button.
It contains a load of style reset and some focus/ripple logic.
Component name
The nameMuiButtonBase can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| action | ref | A ref for imperative actions. It currently only supports focusVisible() action. | |
| centerRipple | bool | false | If true, the ripples are centered. They won't start at the cursor interaction position. |
| children | node | The content of the component. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| component | element type | The component used for the root node. Either a string to use a HTML element or a component. ⚠️ Needs to be able to hold a ref. | |
| disabled | bool | false | If true, the component is disabled. |
| disableRipple | bool | false | If true, the ripple effect is disabled.⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class. |
| disableTouchRipple | bool | false | If true, the touch ripple effect is disabled. |
| focusRipple | bool | false | If true, the base button will have a keyboard focus ripple. |
| focusVisibleClassName | string | This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed. | |
| LinkComponent | elementType | 'a' | The component used to render a link when the href prop is provided. |
| onFocusVisible | func | Callback fired when the component is focused with a keyboard. We trigger a onFocus callback too. | |
| sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| TouchRippleProps | object | Props applied to the TouchRipple element. | |
| touchRippleRef | func | { current?: { pulsate: func, start: func, stop: func } } | A ref that points to the TouchRipple element. |
The
ref is forwarded to the root element.CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiButtonBase-root | Styles applied to the root element. |
| disabled | .Mui-disabled | State class applied to the root element if disabled={true}. |
| focusVisible | .Mui-focusVisible | State class applied to the root element if keyboard focused. |
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.