Button
Buttons let users take actions and make choices with a single tap.
useButton API
Import
import { useButton } from '@mui/base/useButton';
// or
import { useButton } from '@mui/base';Learn about the difference by reading this guide on minimizing bundle size.
| Name | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | If |
| focusableWhenDisabled | boolean | false | If |
| href | string | - | |
| onFocusVisible | React.FocusEventHandler | - | |
| rootElementName | keyof HTMLElementTagNameMap | '' | The HTML element, e.g.'button', 'a' etc |
| rootRef | React.Ref<Element> | - | |
| tabIndex | NonNullable<React.HTMLAttributes<any>['tabIndex']> | - | |
| to | string | - | |
| type | React.ButtonHTMLAttributes<HTMLButtonElement>['type'] | 'button' | Type attribute applied when the |
| Name | Type | Description |
|---|---|---|
| active | boolean | If |
| focusVisible | boolean | If |
| getRootProps | <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseButtonRootSlotProps<ExternalProps> | Resolver for the root slot's props. |
| rootRef | React.RefCallback<Element> | null | A ref to the component's root DOM element. |
| setFocusVisible | React.Dispatch<React.SetStateAction<boolean>> | Callback for setting the |