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 |