Skip to content

Unstyled 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';
You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDefaultDescription
disabledbooleanfalse
If true, the component is disabled.
focusableWhenDisabledbooleanfalse
If true, allows a disabled button to receive focus.
hrefstring
onFocusVisibleReact.FocusEventHandler
refReact.Ref<any>
tabIndexNonNullable<React.HTMLAttributes<any>['tabIndex']>
tostring
typeReact.ButtonHTMLAttributes<HTMLButtonElement>['type']'button'
Type attribute applied when the component is button.

Return value

NameTypeDefaultDescription
activebooleanfalse
If true, the component is active (pressed).
disabledbooleanfalse
If true, the component is disabled.
focusVisiblebooleanfalse
If true, the component is being focused using keyboard.
getRootProps<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseButtonRootSlotProps<TOther>
Resolver for the root slot's props.
setFocusVisibleReact.Dispatch<React.SetStateAction<boolean>>
Callback for setting the focusVisible param.