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

按钮API

React 按钮组件的 API 参考文档。了解此导出模块的属性 (props)、CSS 和其他 API。

演示

导入

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

阅读这篇关于最小化 bundle 大小的指南，了解它们之间的区别。

属性

名称类型默认值描述
actionfunc
| { current?: { focusVisible: func } }		-

用于命令式操作的 ref。目前仅支持 focusVisible() 操作。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'primary'

组件的颜色。它支持对该组件有意义的主题颜色。

要了解如何添加您自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

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

disabledboolfalse

如果为 true，则组件被禁用。

endDecoratornode-

放置在子元素之后的元素。

fullWidthboolfalse

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

loadingboolfalse

如果为 true，则显示加载指示器，并且按钮变为禁用状态。

loadingIndicatornode<CircularProgress />

节点应包含带有 role="progressbar" 和可访问名称的元素。默认情况下，我们渲染一个由按钮本身标记的 CircularProgress。

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

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

size'sm'
| 'md'
| 'lg'
| string		'md'

组件的尺寸。

要了解如何向组件添加自定义尺寸，请查看主题组件—扩展尺寸。

slotProps{ endDecorator?: func
| object, loadingIndicatorCenter?: func
| object, root?: func
| object, startDecorator?: func
| object }		{}

用于每个内部插槽的属性 (props)。

slots{ endDecorator?: elementType, loadingIndicatorCenter?: elementType, root?: elementType, startDecorator?: elementType }{}

用于每个内部插槽的组件。

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

startDecoratornode-

放置在子元素之前的元素。

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

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

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

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'solid'

要使用的全局变体。

要了解如何添加您自己的变体，请查看主题组件—扩展变体。

ref 被转发到根元素。

主题默认属性

您可以使用 JoyButton 通过主题更改此组件的默认属性 (props)。

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.MuiButton-root'button'渲染根组件的组件。
startDecorator.MuiButton-startDecorator'span'渲染开始装饰器的组件。
endDecorator.MuiButton-endDecorator'span'渲染结束装饰器的组件。
loadingIndicatorCenter.MuiButton-loadingIndicatorCenter'span'渲染加载指示器中心的组件。

CSS 类

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

类名规则名称描述
.Mui-disabled如果 disabled={true}，则应用于根元素的状态类。
.Mui-focusVisible如果按钮是键盘聚焦，则应用于 ButtonBase 根元素的状态类。
.MuiButton-colorContextcolorContext当触发颜色反转时，应用于根元素的类名。
.MuiButton-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiButton-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiButton-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiButton-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiButton-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiButton-fullWidthfullWidth如果 fullWidth={true}，则应用于根元素的类名。
.MuiButton-loadingloading如果 loading={true}，则应用于根元素的类名。
.MuiButton-sizeLgsizeLg如果 size="lg"，则应用于根元素的类名。
.MuiButton-sizeMdsizeMd如果 size="md"，则应用于根元素的类名。
.MuiButton-sizeSmsizeSm如果 size="sm"，则应用于根元素的类名。
.MuiButton-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiButton-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiButton-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiButton-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。

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

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

源代码

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