跳到主要内容跳到主要内容
🚀 影响 Material UI 2025 年路线图！参与最新的开发者调查

ButtonAPI

React Button 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import Button from '@mui/material/Button';
// or
import { Button } from '@mui/material';

阅读本指南，了解有关最小化捆绑包大小的差异。

Props

ButtonBase 组件的 Props 也可用。

名称类型默认值描述
childrennode-

组件的内容。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下面的 CSS 类 API。

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

组件的颜色。它支持默认和自定义主题颜色，可以按照调色板自定义指南中所示的方式添加。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

disabledboolfalse

如果 true，则禁用该组件。

disableElevationboolfalse

如果 true，则不使用 elevation。

disableFocusRippleboolfalse

如果 true，则禁用键盘焦点涟漪。

disableRippleboolfalse

如果 true，则禁用涟漪效果。
⚠️ 如果没有涟漪，则默认情况下没有 :focus-visible 的样式。请务必通过使用 .Mui-focusVisible 类应用单独的样式来突出显示元素。

endIconnode-

放置在 children 之后的元素。

fullWidthboolfalse

如果 true，则按钮将占据其容器的完整宽度。

hrefstring-

单击按钮时链接到的 URL。如果已定义，则将使用 a 元素作为根节点。

loadingboolnull

如果 true，则加载指示器可见且禁用按钮。如果为 true | false，则始终在 children 之前渲染加载包装器，以防止 Google 翻译崩溃。

loadingIndicatornode<CircularProgress color="inherit" size={16} />

如果按钮处于加载状态，则放置在 children 之前的元素。节点应包含一个 role="progressbar" 且具有可访问名称的元素。默认情况下，它渲染一个由按钮本身标记的 CircularProgress。

loadingPosition'center'
| 'end'
| 'start'		'center'

加载指示器可以位于按钮的开始、结束或中心。

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

组件的大小。small 相当于密集的按钮样式。

startIconnode-

放置在 children 之前的元素。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参阅 `sx` 页面。

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

要使用的 variant。

ref 被转发到根元素。

继承

虽然上面没有明确记录，但 ButtonBase 组件的 props 在 Button 中也可用。您可以利用这一点来定位嵌套组件。

主题默认 props

您可以使用 MuiButton 通过主题更改此组件的默认 props。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.Mui-disabled如果 disabled={true}，则应用于根元素的状态类。
.Mui-focusVisible如果按钮是键盘聚焦的，则应用于 ButtonBase 根元素的状态类。
.MuiButton-colorErrorcolorError如果 color="error"，则应用于根元素的样式。
.MuiButton-colorInfocolorInfo如果 color="info"，则应用于根元素的样式。
.MuiButton-colorInheritcolorInherit如果 color="inherit"，则应用于根元素的样式。
.MuiButton-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的样式。
.MuiButton-colorSecondarycolorSecondary如果 color="secondary"，则应用于根元素的样式。
.MuiButton-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的样式。
.MuiButton-colorWarningcolorWarning如果 color="warning"，则应用于根元素的样式。
.MuiButton-containedcontained如果 variant="contained"，则应用于根元素的样式。
.MuiButton-containedErrorcontainedError如果 variant="contained" 且 color="error"，则应用于根元素的样式。
.MuiButton-containedInfocontainedInfo如果 variant="contained" 且 color="info"，则应用于根元素的样式。
.MuiButton-containedInheritcontainedInherit如果 variant="contained" 且 color="inherit"，则应用于根元素的样式。
.MuiButton-containedPrimarycontainedPrimary如果 variant="contained" 且 color="primary"，则应用于根元素的样式。
.MuiButton-containedSecondarycontainedSecondary如果 variant="contained" 且 color="secondary"，则应用于根元素的样式。
.MuiButton-containedSizeLargecontainedSizeLarge如果 size="large" 且 variant="contained"，则应用于根元素的样式。
.MuiButton-containedSizeMediumcontainedSizeMedium如果 size="medium" 且 variant="contained"，则应用于根元素的样式。
.MuiButton-containedSizeSmallcontainedSizeSmall如果 size="small" 且 variant="contained"，则应用于根元素的样式。
.MuiButton-containedSuccesscontainedSuccess如果 variant="contained" 且 color="success"，则应用于根元素的样式。
.MuiButton-containedWarningcontainedWarning如果 variant="contained" 且 color="warning"，则应用于根元素的样式。
.MuiButton-disableElevationdisableElevation如果 disableElevation={true}，则应用于根元素的样式。
.MuiButton-endIconendIcon如果提供，则应用于 endIcon 元素的样式。
.MuiButton-fullWidthfullWidth如果 fullWidth={true}，则应用于根元素的样式。
.MuiButton-iconicon如果提供，则应用于 icon 元素的样式
.MuiButton-iconSizeLargeiconSizeLarge如果提供且 size="large"，则应用于 icon 元素的样式。
.MuiButton-iconSizeMediumiconSizeMedium如果提供且 size="medium"，则应用于 icon 元素的样式。
.MuiButton-iconSizeSmalliconSizeSmall如果提供且 size="small"，则应用于 icon 元素的样式。
.MuiButton-loadingloading如果 loading={true}，则应用于根元素的样式。
.MuiButton-loadingIconPlaceholderloadingIconPlaceholder应用于 loadingIconPlaceholder 元素的样式。
.MuiButton-loadingIndicatorloadingIndicator应用于 loadingIndicator 元素的样式。
.MuiButton-loadingPositionCenterloadingPositionCenter如果 loadingPosition="center"，则应用于根元素的样式。
.MuiButton-loadingPositionEndloadingPositionEnd如果 loadingPosition="end"，则应用于根元素的样式。
.MuiButton-loadingPositionStartloadingPositionStart如果 loadingPosition="start"，则应用于根元素的样式。
.MuiButton-loadingWrapperloadingWrapper应用于 loadingWrapper 元素的样式。
.MuiButton-outlinedoutlined如果 variant="outlined"，则应用于根元素的样式。
.MuiButton-outlinedErroroutlinedError如果 variant="outlined" 且 color="error"，则应用于根元素的样式。
.MuiButton-outlinedInfooutlinedInfo如果 variant="outlined" 且 color="info"，则应用于根元素的样式。
.MuiButton-outlinedInheritoutlinedInherit如果 variant="outlined" 且 color="inherit"，则应用于根元素的样式。
.MuiButton-outlinedPrimaryoutlinedPrimary如果 variant="outlined" 且 color="primary"，则应用于根元素的样式。
.MuiButton-outlinedSecondaryoutlinedSecondary如果 variant="outlined" 且 color="secondary"，则应用于根元素的样式。
.MuiButton-outlinedSizeLargeoutlinedSizeLarge如果 size="large" 且 variant="outlined"，则应用于根元素的样式。
.MuiButton-outlinedSizeMediumoutlinedSizeMedium如果 size="medium" 且 variant="outlined"，则应用于根元素的样式。
.MuiButton-outlinedSizeSmalloutlinedSizeSmall如果 size="small" 且 variant="outlined"，则应用于根元素的样式。
.MuiButton-outlinedSuccessoutlinedSuccess如果 variant="outlined" 且 color="success"，则应用于根元素的样式。
.MuiButton-outlinedWarningoutlinedWarning如果 variant="outlined" 且 color="warning"，则应用于根元素的样式。
.MuiButton-rootroot应用于根元素的样式。
.MuiButton-sizeLargesizeLarge如果 size="large"，则应用于根元素的样式。
.MuiButton-sizeMediumsizeMedium如果 size="medium"，则应用于根元素的样式。
.MuiButton-sizeSmallsizeSmall如果 size="small"，则应用于根元素的样式。
.MuiButton-startIconstartIcon如果提供，则应用于 startIcon 元素的样式。
.MuiButton-texttext如果 variant="text"，则应用于根元素的样式。
.MuiButton-textErrortextError如果 variant="text" 且 color="error"，则应用于根元素的样式。
.MuiButton-textInfotextInfo如果 variant="text" 且 color="info"，则应用于根元素的样式。
.MuiButton-textInherittextInherit如果 variant="text" 且 color="inherit"，则应用于根元素的样式。
.MuiButton-textPrimarytextPrimary如果 variant="text" 且 color="primary"，则应用于根元素的样式。
.MuiButton-textSecondarytextSecondary如果 variant="text" 且 color="secondary"，则应用于根元素的样式。
.MuiButton-textSizeLargetextSizeLarge如果 size="large" 且 variant="text"，则应用于根元素的样式。
.MuiButton-textSizeMediumtextSizeMedium如果 size="medium" 且 variant="text"，则应用于根元素的样式。
.MuiButton-textSizeSmalltextSizeSmall如果 size="small" 且 variant="text"，则应用于根元素的样式。
.MuiButton-textSuccesstextSuccess如果 variant="text" 且 color="success"，则应用于根元素的样式。
.MuiButton-textWarningtextWarning如果 variant="text" 且 color="warning"，则应用于根元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

  • 使用全局类名。
  • 使用作为自定义主题中组件的 styleOverrides 属性一部分的规则名称。

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。