materialuiupgraded

Version:

Material-UI's workspace package

89 lines (68 loc) • 7.25 kB

Markdown

--- filename: /packages/material-ui/src/Button/Button.js title: Button API ---  # Button The API documentation of the Button React component. Learn more about the properties and the CSS customization points. ```js import Button from '@material-ui/core/Button'; ``` ## 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-api) below for more details. | | color | enum: 'default' |  'inherit' |  'primary' |  'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | union: string |  func |  object | 'button' | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | bool | false | If `true`, the button will be disabled. | | disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | | disableRipple | bool | | If `true`, the ripple effect will be disabled. | | 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. | | mini | bool | false | If `true`, and `variant` is `'fab'`, will use mini floating action button styling. | | size | enum: 'small' |  'medium' |  'large' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | | variant | enum: 'text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab' | 'text' | The variant to use. __WARNING__: `flat` and `raised` are deprecated. Instead use `text` and `contained` respectively. | Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base/)). ## CSS API You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. | label | Styles applied to the span element that wraps the children. | text | Styles applied to the root element if `variant="text"`. | textPrimary | Styles applied to the root element if `variant="text"` and `color="primary"`. | textSecondary | Styles applied to the root element if `variant="text"` and `color="secondary"`. | flat | Styles applied to the root element for backwards compatibility with legacy variant naming. | flatPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming. | flatSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming. | outlined | Styles applied to the root element if `variant="outlined"`. | outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. | outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. | contained | Styles applied to the root element if `variant="[contained \| fab]"`. | containedPrimary | Styles applied to the root element if `variant="[contained \| fab]"` and `color="primary"`. | containedSecondary | Styles applied to the root element if `variant="[contained \| fab]"` and `color="secondary"`. | raised | Styles applied to the root element for backwards compatibility with legacy variant naming. | raisedPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming. | raisedSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming. | fab | Styles applied to the root element if `variant="[fab \| extendedFab]"`. | extendedFab | Styles applied to the root element if `variant="extendedFab"`. | focusVisible | Styles applied to the ButtonBase root element if the button is keyboard focused. | disabled | Styles applied to the root element if `disabled={true}`. | colorInherit | Styles applied to the root element if `color="inherit"`. | mini | Styles applied to the root element if `size="mini"` & `variant="[fab \| extendedFab]"`. | sizeSmall | Styles applied to the root element if `size="small"`. | sizeLarge | Styles applied to the root element if `size="large"`. | fullWidth | Styles applied to the root element if `fullWidth={true}`. Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button/Button.js) for more detail. If using the `overrides` key of the theme as documented [here](/customization/themes/#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiButton`. ## Inheritance The properties 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 - [Buttons](/demos/buttons/)