ButtonBase API
Documentação da API para o componente React ButtonBase . Aprenda sobre as propriedades disponíveis e a API CSS.
Demonstrações
For examples and details on the usage of this React component, visit the component demo pages:
Importação
import ButtonBase from '@mui/material/ButtonBase';
// ou
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.
Nome do componente
The nameMuiButtonBase can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente nativo também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| 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 | O conteúdo do componente. | |
| classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| 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 | Se true, o componente está desabilitado. |
| 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. | |
| 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. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiButtonBase-root | Estilos aplicados ao elemento raiz. |
| disabled | .Mui-disabled | Pseudo-class aplicada a o elemento raiz se disabled={true}. |
| focusVisible | .Mui-focusVisible | Pseudo-class aplicada a o elemento raiz se teclado focado. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.