--- filename: /packages/material-ui/src/Button/Button.js --- # Button API

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

## Import ```js 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](/guides/minimizing-bundle-size/). ## Component name The `MuiButton` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) 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](#css) 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 | 'large'
| 'medium'
| 'small' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | | startIcon | node | | Element placed before the children. | | variant | 'contained'
| 'outlined'
| 'text' | '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](/api/button-base/)). ## 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](/customization/components/#overriding-styles-with-classes). - With a [global class name](/customization/components/#overriding-styles-with-global-class-names). - With a theme and an [`overrides` property](/customization/globals/#css). If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js) for more detail. ## Inheritance The props of the [ButtonBase](/api/button-base/) component are also available. You can take advantage of this behavior to [target nested components](/guides/api/#spread). ## Demos - [Button Group](/components/button-group/) - [Buttons](/components/buttons/)