Button

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

Button API

Import

import Button from '@mui/base/Button';
// or
import { Button } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

action

A ref for imperative actions. It currently only supports focusVisible() action.

Type:

func | { current?: { focusVisible: func } }

disabled

If true, the component is disabled.

Type:

bool

Default:

false

focusableWhenDisabled

If true, allows a disabled button to receive focus.

Type:

bool

Default:

false

slotProps

The props used for each slot inside the Button.

Type:

{ root?: func | object }

Default:

{}

slots

The components used for each slot inside the Button. Either a string to use a HTML element or a component.

Type:

{ root?: elementType }

Default:

{}

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

rootprops.href || props.to ? 'a' : 'button'Required

Global class: .MuiButton-root

Description: The component that renders the root.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

.Mui-activeSTATE

State class applied to the root button element if active={true}.

.Mui-disabledSTATE

State class applied to the root button element if disabled={true}.

.Mui-focusVisibleSTATE

State class applied to the root button element if focusVisible={true}.