Button API - Material UI - MUI
Maybe your like
Button API
The ref is forwarded to the root element.
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:
- Button Group
- Button
- Number Field
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
View:tableProps of the ButtonBase component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The content of the component. |
| classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
| color | 'inherit'| 'primary'| 'secondary'| 'success'| 'error'| 'info'| 'warning'| string | 'primary' | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. |
| component | elementType | - | The component used for the root node. Either a string to use a HTML element or a component. |
| disabled | bool | false | If true, the component is disabled. |
| disableElevation | bool | false | If true, no elevation is used. |
| disableFocusRipple | bool | false | If true, the keyboard focus ripple is disabled. |
| disableRipple | bool | false | 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. |
| 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. |
| loading | bool | null | If true, the loading indicator is visible and the button is disabled. If true | false, the loading wrapper is always rendered before the children to prevent Google Translation Crash. |
| loadingIndicator | node | <CircularProgress color="inherit" size={16} /> | Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default, it renders a CircularProgress that is labeled by the button itself. |
| loadingPosition | 'center'| 'end'| 'start' | 'center' | The loading indicator can be positioned on the start, end, or the center of the button. |
| size | 'small'| 'medium'| 'large'| string | 'medium' | The size of the component. small is equivalent to the dense button styling. |
| startIcon | node | - | Element placed before the children. |
| sx | Array<func| object| bool>| func| object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
| variant | 'contained'| 'outlined'| 'text'| string | 'text' | The variant to use. |
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 classes
View:tableThese class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Rule name | Description |
|---|---|---|
| .Mui-disabled | State class applied to the root element if disabled={true}. | |
| .Mui-focusVisible | State class applied to the ButtonBase root element if the button is keyboard focused. | |
| .MuiButton-colorError | colorError | Styles applied to the root element if color="error". |
| .MuiButton-colorInfo | colorInfo | Styles applied to the root element if color="info". |
| .MuiButton-colorInherit | colorInherit | Styles applied to the root element if color="inherit". |
| .MuiButton-colorPrimary | colorPrimary | Styles applied to the root element if color="primary". |
| .MuiButton-colorSecondary | colorSecondary | Styles applied to the root element if color="secondary". |
| .MuiButton-colorSuccess | colorSuccess | Styles applied to the root element if color="success". |
| .MuiButton-colorWarning | colorWarning | Styles applied to the root element if color="warning". |
| .MuiButton-contained | contained | Styles applied to the root element if variant="contained". |
| .MuiButton-containedError | containedError | Styles applied to the root element if variant="contained" and color="error".Deprecated－Combine the .MuiButton-contained and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedInfo | containedInfo | Styles applied to the root element if variant="contained" and color="info".Deprecated－Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedInherit | containedInherit | Styles applied to the root element if variant="contained" and color="inherit".Deprecated－Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedPrimary | containedPrimary | Styles applied to the root element if variant="contained" and color="primary".Deprecated－Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedSecondary | containedSecondary | Styles applied to the root element if variant="contained" and color="secondary".Deprecated－Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedSizeLarge | containedSizeLarge | Styles applied to the root element if size="large" and variant="contained".Deprecated－Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedSizeMedium | containedSizeMedium | Styles applied to the root element if size="medium" and variant="contained".Deprecated－Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedSizeSmall | containedSizeSmall | Styles applied to the root element if size="small" and variant="contained".Deprecated－Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedSuccess | containedSuccess | Styles applied to the root element if variant="contained" and color="success".Deprecated－Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-containedWarning | containedWarning | Styles applied to the root element if variant="contained" and color="warning".Deprecated－Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-disableElevation | disableElevation | Styles applied to the root element if disableElevation={true}. |
| .MuiButton-endIcon | endIcon | Styles applied to the endIcon element if supplied. |
| .MuiButton-fullWidth | fullWidth | Styles applied to the root element if fullWidth={true}. |
| .MuiButton-icon | icon | Styles applied to the icon element if supplied |
| .MuiButton-iconSizeLarge | iconSizeLarge | Styles applied to the icon element if supplied and size="large".Deprecated－Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-iconSizeMedium | iconSizeMedium | Styles applied to the icon element if supplied and size="medium".Deprecated－Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-iconSizeSmall | iconSizeSmall | Styles applied to the icon element if supplied and size="small".Deprecated－Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-loading | loading | Styles applied to the root element if loading={true}. |
| .MuiButton-loadingIconPlaceholder | loadingIconPlaceholder | Styles applied to the loadingIconPlaceholder element. |
| .MuiButton-loadingIndicator | loadingIndicator | Styles applied to the loadingIndicator element. |
| .MuiButton-loadingPositionCenter | loadingPositionCenter | Styles applied to the root element if loadingPosition="center". |
| .MuiButton-loadingPositionEnd | loadingPositionEnd | Styles applied to the root element if loadingPosition="end". |
| .MuiButton-loadingPositionStart | loadingPositionStart | Styles applied to the root element if loadingPosition="start". |
| .MuiButton-loadingWrapper | loadingWrapper | Styles applied to the loadingWrapper element. |
| .MuiButton-outlined | outlined | Styles applied to the root element if variant="outlined". |
| .MuiButton-outlinedError | outlinedError | Styles applied to the root element if variant="outlined" and color="error".Deprecated－Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedInfo | outlinedInfo | Styles applied to the root element if variant="outlined" and color="info".Deprecated－Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedInherit | outlinedInherit | Styles applied to the root element if variant="outlined" and color="inherit".Deprecated－Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedPrimary | outlinedPrimary | Styles applied to the root element if variant="outlined" and color="primary".Deprecated－Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedSecondary | outlinedSecondary | Styles applied to the root element if variant="outlined" and color="secondary".Deprecated－Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedSizeLarge | outlinedSizeLarge | Styles applied to the root element if size="large" and variant="outlined".Deprecated－Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedSizeMedium | outlinedSizeMedium | Styles applied to the root element if size="medium" and variant="outlined".Deprecated－Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedSizeSmall | outlinedSizeSmall | Styles applied to the root element if size="small" and variant="outlined".Deprecated－Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedSuccess | outlinedSuccess | Styles applied to the root element if variant="outlined" and color="success".Deprecated－Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-outlinedWarning | outlinedWarning | Styles applied to the root element if variant="outlined" and color="warning".Deprecated－Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-root | root | Styles applied to the root element. |
| .MuiButton-sizeLarge | sizeLarge | Styles applied to the root element if size="large". |
| .MuiButton-sizeMedium | sizeMedium | Styles applied to the root element if size="medium". |
| .MuiButton-sizeSmall | sizeSmall | Styles applied to the root element if size="small". |
| .MuiButton-startIcon | startIcon | Styles applied to the startIcon element if supplied. |
| .MuiButton-text | text | Styles applied to the root element if variant="text". |
| .MuiButton-textError | textError | Styles applied to the root element if variant="text" and color="error".Deprecated－Combine the .MuiButton-text and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textInfo | textInfo | Styles applied to the root element if variant="text" and color="info".Deprecated－Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textInherit | textInherit | Styles applied to the root element if variant="text" and color="inherit".Deprecated－Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textPrimary | textPrimary | Styles applied to the root element if variant="text" and color="primary".Deprecated－Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textSecondary | textSecondary | Styles applied to the root element if variant="text" and color="secondary".Deprecated－Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textSizeLarge | textSizeLarge | Styles applied to the root element if size="large" and variant="text".Deprecated－Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textSizeMedium | textSizeMedium | Styles applied to the root element if size="medium" and variant="text".Deprecated－Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textSizeSmall | textSizeSmall | Styles applied to the root element if size="small" and variant="text".Deprecated－Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textSuccess | textSuccess | Styles applied to the root element if variant="text" and color="success".Deprecated－Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details. |
| .MuiButton-textWarning | textWarning | Styles applied to the root element if variant="text" and color="warning".Deprecated－Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details. |
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.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.
Tag » Color Material Ui Button
-
React Button Component - Material UI - MUI
-
MUI Customize Button Color? - Stack Overflow
-
The Complete Guide To MUI Button Color (v5 And V4)
-
Material UI Custom Button Colors - CodeSandbox
-
Buttons - Material Design
-
Material UI Button API - GeeksforGeeks
-
Custom Button Variant With Custom Color Doesn't Work #30588 - GitHub
-
Button Doesn't Respect Theme Colors · Issue #28690 · Mui/material-ui
-
Material-ui Button Color Won't Change Through Css Styling - Anycodings
-
React Material UI: How To Give A Button A Custom Color When Disabled?
-
Material Ui Button On Hover Dont Change Color Code Example
-
MUI Customize Button Color? | QueryThreads
-
Material UI Tutorial #3 - Buttons - YouTube