ButtonBase API
Documentação da API para o componente React ButtonBase . Aprenda sobre as propriedades disponíveis e a API CSS.
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
Props of the nativo component are also available.
| 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 | Esta propriedade pode ajudar a identificar qual elemento tem o foco do teclado. O nome da classe será aplicado quando o elemento receber o foco através da interação do teclado. Ela é um polyfill para o seletor CSS :focus-visible. A razão para o uso deste recurso é explicada aqui. Um polyfill pode ser usado para aplicar uma classe focus-visible para outros componentes, se necessário. | |
| 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 | 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. |
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.