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

disabled

If true, the component is disabled.

Type:

boolean

Default:

false

focusableWhenDisabled

If true, allows a disabled button to receive focus.

Type:

boolean

Default:

false

href

Type:

string

onFocusVisible

Type:

React.FocusEventHandler

rootRef

Type:

React.Ref<Element>

tabIndex

Type:

NonNullable<React.HTMLAttributes<any>['tabIndex']>

Type:

string

type

Type attribute applied when the component is button.

Type:

React.ButtonHTMLAttributes<HTMLButtonElement>['type']

Default:

'button'

Return value

active

If true, the component is active (pressed).

Type:

boolean

focusVisible

If true, the component is being focused using keyboard.

Type:

boolean

getRootProps

Resolver for the root slot's props.

Type:

<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseButtonRootSlotProps<TOther>

rootRef

A ref to the component's root DOM element.

Type:

React.RefCallback<Element> | null

setFocusVisible

Callback for setting the focusVisible param.

Type:

React.Dispatch<React.SetStateAction<boolean>>