Skip to content
Edit this page

Button API

API reference docs for the React Button component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import Button from '@mui/material/Button';
// or
import { Button } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the ButtonBase component are also available.

children

The content of the component.

Type:

node
classes

Override or extend the styles applied to the component.

Type:

object
color

The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

Type:

'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string

Default:

'primary'
component

The component used for the root node. Either a string to use a HTML element or a component.

Type:

elementType
disabled

If true, the component is disabled.

Type:

bool

Default:

false
disableElevation

If true, no elevation is used.

Type:

bool

Default:

false
disableFocusRipple

If true, the keyboard focus ripple is disabled.

Type:

bool

Default:

false
disableRipple

If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.

Type:

bool

Default:

false
endIcon

Element placed after the children.

Type:

node
fullWidth

If true, the button will take up the full width of its container.

Type:

bool

Default:

false
href

The URL to link to when the button is clicked. If defined, an a element will be used as the root node.

Type:

string
size

The size of the component. small is equivalent to the dense button styling.

Type:

'small' | 'medium' | 'large' | string

Default:

'medium'
startIcon

Element placed before the children.

Type:

node
sx

The system prop that allows defining system overrides as well as additional CSS styles.

Type:

Array<func | object | bool> | func | object
variant

The variant to use.

Type:

'contained' | 'outlined' | 'text' | string

Default:

'text'
The ref is forwarded to the root element.

Inheritance

While not explicitly documented above, the props of the ButtonBase component are also available in Button. You can take advantage of this to target nested components.

Theme default props

You can use MuiButton to change the default props of this component with the theme.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiButton-rootroot

Styles applied to the root element.

.MuiButton-texttext

Styles applied to the root element if variant="text".

.MuiButton-textInherittextInherit

Styles applied to the root element if variant="text" and color="inherit".

.MuiButton-textPrimarytextPrimary

Styles applied to the root element if variant="text" and color="primary".

.MuiButton-textSecondarytextSecondary

Styles applied to the root element if variant="text" and color="secondary".

.MuiButton-textSuccesstextSuccess

Styles applied to the root element if variant="text" and color="success".

.MuiButton-textErrortextError

Styles applied to the root element if variant="text" and color="error".

.MuiButton-textInfotextInfo

Styles applied to the root element if variant="text" and color="info".

.MuiButton-textWarningtextWarning

Styles applied to the root element if variant="text" and color="warning".

.MuiButton-outlinedoutlined

Styles applied to the root element if variant="outlined".

.MuiButton-outlinedInheritoutlinedInherit

Styles applied to the root element if variant="outlined" and color="inherit".

.MuiButton-outlinedPrimaryoutlinedPrimary

Styles applied to the root element if variant="outlined" and color="primary".

.MuiButton-outlinedSecondaryoutlinedSecondary

Styles applied to the root element if variant="outlined" and color="secondary".

.MuiButton-outlinedSuccessoutlinedSuccess

Styles applied to the root element if variant="outlined" and color="success".

.MuiButton-outlinedErroroutlinedError

Styles applied to the root element if variant="outlined" and color="error".

.MuiButton-outlinedInfooutlinedInfo

Styles applied to the root element if variant="outlined" and color="info".

.MuiButton-outlinedWarningoutlinedWarning

Styles applied to the root element if variant="outlined" and color="warning".

.MuiButton-containedcontained

Styles applied to the root element if variant="contained".

.MuiButton-containedInheritcontainedInherit

Styles applied to the root element if variant="contained" and color="inherit".

.MuiButton-containedPrimarycontainedPrimary

Styles applied to the root element if variant="contained" and color="primary".

.MuiButton-containedSecondarycontainedSecondary

Styles applied to the root element if variant="contained" and color="secondary".

.MuiButton-containedSuccesscontainedSuccess

Styles applied to the root element if variant="contained" and color="success".

.MuiButton-containedInfocontainedInfo

Styles applied to the root element if variant="contained" and color="info".

.MuiButton-containedErrorcontainedError

Styles applied to the root element if variant="contained" and color="error".

.MuiButton-containedWarningcontainedWarning

Styles applied to the root element if variant="contained" and color="warning".

.MuiButton-disableElevationdisableElevation

Styles applied to the root element if disableElevation={true}.

.Mui-focusVisiblefocusVisibleSTATE

State class applied to the ButtonBase root element if the button is keyboard focused.

.Mui-disableddisabledSTATE

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

.MuiButton-colorInheritcolorInherit

Styles applied to the root element if color="inherit".

.MuiButton-textSizeSmalltextSizeSmall

Styles applied to the root element if size="small" and variant="text".

.MuiButton-textSizeMediumtextSizeMedium

Styles applied to the root element if size="medium" and variant="text".

.MuiButton-textSizeLargetextSizeLarge

Styles applied to the root element if size="large" and variant="text".

.MuiButton-outlinedSizeSmalloutlinedSizeSmall

Styles applied to the root element if size="small" and variant="outlined".

.MuiButton-outlinedSizeMediumoutlinedSizeMedium

Styles applied to the root element if size="medium" and variant="outlined".

.MuiButton-outlinedSizeLargeoutlinedSizeLarge

Styles applied to the root element if size="large" and variant="outlined".

.MuiButton-containedSizeSmallcontainedSizeSmall

Styles applied to the root element if size="small" and variant="contained".

.MuiButton-containedSizeMediumcontainedSizeMedium

Styles applied to the root element if size="medium" and variant="contained".

.MuiButton-containedSizeLargecontainedSizeLarge

Styles applied to the root element if size="large" and variant="contained".

.MuiButton-sizeSmallsizeSmall

Styles applied to the root element if size="small".

.MuiButton-sizeMediumsizeMedium

Styles applied to the root element if size="medium".

.MuiButton-sizeLargesizeLarge

Styles applied to the root element if size="large".

.MuiButton-fullWidthfullWidth

Styles applied to the root element if fullWidth={true}.

.MuiButton-startIconstartIcon

Styles applied to the startIcon element if supplied.

.MuiButton-endIconendIcon

Styles applied to the endIcon element if supplied.

.MuiButton-iconSizeSmalliconSizeSmall

Styles applied to the icon element if supplied and size="small".

.MuiButton-iconSizeMediumiconSizeMedium

Styles applied to the icon element if supplied and size="medium".

.MuiButton-iconSizeLargeiconSizeLarge

Styles applied to the icon element if supplied and size="large".

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