ButtonBase API
API documentation for the React ButtonBase component. Learn about the available props, and the CSS API.
Import
import ButtonBase from '@material-ui/core/ButtonBase';
// o
import { ButtonBase } from '@material-ui/core';
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
Nombre | Tipo | Por defecto | Descripción |
---|---|---|---|
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 accordion is displayed in a disabled state. |
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 focusVisibleClassName . |
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. | |
onFocusVisible | func | Callback fired when the component is focused with a keyboard. We trigger a onFocus callback too. | |
sx | 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. |
The
ref
is forwarded to the root element.Any other props supplied will be provided to the root element (native element).
CSS
Rule name | Global class | Descripción |
---|---|---|
root | .MuiButtonBase-root | Styles applied to the root element. |
disabled | .Mui-disabled | Pseudo-class applied to the root element if disabled={true} . |
focusVisible | .Mui-focusVisible | Pseudo-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
styleOverrides
property in a custom theme.