Button API

The API documentation of the Button React component. Learn more about the props and the CSS customization points.

Import

import Button from '@material-ui/core/Button';
// or
import { Button } from '@material-ui/core';

You can learn more about the difference by reading this guide.

Component name

The MuiButton name can be used for providing default props or style overrides at the theme level.

Props

Name	Type	Default	Description
children *	node		The content of the button.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'default' | 'inherit' | 'primary' | 'secondary'	'default'	The color of the component. It supports those theme colors that make sense for this component.
component	elementType	'button'	The component used for the root node. Either a string to use a HTML element or a component.
disabled	bool	false	If true, the button will be disabled.
disableElevation	bool	false	If true, no elevation is used.
disableFocusRipple	bool	false	If true, the keyboard focus ripple will be disabled.
disableRipple	bool		If true, the ripple effect will be 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 focusVisibleClassName.
endIcon	node		Element placed after the children.
fullWidth	bool	false	If true, the button will take up the full width of its container.
href	string		The URL to link to when the button is clicked. If defined, an a element will be used as the root node.
size	'small' | 'medium' | 'large'	'medium'	The size of the button. small is equivalent to the dense button styling.
startIcon	node		Element placed before the children.
variant	'text' | 'outlined' | 'contained'	'text'	The variant to use.

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (ButtonBase).

CSS

Rule name	Global class	Description
root	.MuiButton-root	Styles applied to the root element.
label	.MuiButton-label	Styles applied to the span element that wraps the children.
text	.MuiButton-text	Styles applied to the root element if variant="text".
textPrimary	.MuiButton-textPrimary	Styles applied to the root element if variant="text" and color="primary".
textSecondary	.MuiButton-textSecondary	Styles applied to the root element if variant="text" and color="secondary".
outlined	.MuiButton-outlined	Styles applied to the root element if variant="outlined".
outlinedPrimary	.MuiButton-outlinedPrimary	Styles applied to the root element if variant="outlined" and color="primary".
outlinedSecondary	.MuiButton-outlinedSecondary	Styles applied to the root element if variant="outlined" and color="secondary".
contained	.MuiButton-contained	Styles applied to the root element if variant="contained".
containedPrimary	.MuiButton-containedPrimary	Styles applied to the root element if variant="contained" and color="primary".
containedSecondary	.MuiButton-containedSecondary	Styles applied to the root element if variant="contained" and color="secondary".
disableElevation	.MuiButton-disableElevation	Styles applied to the root element if disableElevation={true}.
focusVisible	.Mui-focusVisible	Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
disabled	.Mui-disabled	Pseudo-class applied to the root element if disabled={true}.
colorInherit	.MuiButton-colorInherit	Styles applied to the root element if color="inherit".
textSizeSmall	.MuiButton-textSizeSmall	Styles applied to the root element if size="small" and variant="text".
textSizeLarge	.MuiButton-textSizeLarge	Styles applied to the root element if size="large" and variant="text".
outlinedSizeSmall	.MuiButton-outlinedSizeSmall	Styles applied to the root element if size="small" and variant="outlined".
outlinedSizeLarge	.MuiButton-outlinedSizeLarge	Styles applied to the root element if size="large" and variant="outlined".
containedSizeSmall	.MuiButton-containedSizeSmall	Styles applied to the root element if size="small" and variant="contained".
containedSizeLarge	.MuiButton-containedSizeLarge	Styles applied to the root element if size="large" and variant="contained".
sizeSmall	.MuiButton-sizeSmall	Styles applied to the root element if size="small".
sizeLarge	.MuiButton-sizeLarge	Styles applied to the root element if size="large".
fullWidth	.MuiButton-fullWidth	Styles applied to the root element if fullWidth={true}.
startIcon	.MuiButton-startIcon	Styles applied to the startIcon element if supplied.
endIcon	.MuiButton-endIcon	Styles applied to the endIcon element if supplied.
iconSizeSmall	.MuiButton-iconSizeSmall	Styles applied to the icon element if supplied and size="small".
iconSizeMedium	.MuiButton-iconSizeMedium	Styles applied to the icon element if supplied and size="medium".
iconSizeLarge	.MuiButton-iconSizeLarge	Styles applied to the icon element if supplied and size="large".

You can override the style of the component thanks to one of these customization points:

• With a rule name of the classes object prop.
• With a global class name.
• With a theme and an overrides property.

If that's not sufficient, you can check the implementation of the component for more detail.

Inheritance

The props of the ButtonBase component are also available. You can take advantage of this behavior to target nested components.

Demos

• Button Group
• Buttons