Skip to content
+

Button

Buttons let users take actions and make choices with a single tap.

Component demosComponents APIHooks API

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']>

to

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:<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseButtonRootSlotProps<ExternalProps>

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>>