Skip to content
+

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.

Parameters

NameTypeDefaultDescription
disabledbooleanfalse

If true, the component is disabled.

focusableWhenDisabledbooleanfalse

If true, allows a disabled button to receive focus.

hrefstring-
onFocusVisibleReact.FocusEventHandler-
rootElementNamekeyof HTMLElementTagNameMap''

The HTML element, e.g.'button', 'a' etc

rootRefReact.Ref<Element>-
tabIndexNonNullable<React.HTMLAttributes<any>['tabIndex']>-
tostring-
typeReact.ButtonHTMLAttributes<HTMLButtonElement>['type']'button'

Type attribute applied when the component is button.

Return value

NameTypeDescription
activeboolean

If true, the component is active (pressed).

focusVisibleboolean

If true, the component is being focused using keyboard.

getRootProps<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseButtonRootSlotProps<ExternalProps>

Resolver for the root slot's props.

rootRefReact.RefCallback<Element> | null

A ref to the component's root DOM element.

setFocusVisibleReact.Dispatch<React.SetStateAction<boolean>>

Callback for setting the focusVisible param.