MUI Joy UI Button 组件详解

本文介绍 MUI Joy UI 的 Button 组件，这是一个功能丰富、易于定制的 React 按钮组件，提供了多种变体、尺寸和颜色选项，帮助开发者快速构建美观的用户界面。

简介

Button 组件让用户能够通过单次点击执行操作和做出选择。Joy UI 的 Button 组件替代了原生 HTML <button> 元素，提供了更丰富的样式和可访问性选项。

基础用法

jsx

import Button from '@mui/joy/Button';

<Button onClick={() => {}}>Hello world</Button>

Joy UI Button 的行为与原生 HTML <button> 类似，可以包裹显示在按钮表面的文本。

基本状态

Button 组件有三种基本状态：默认、禁用和加载中。

jsx

<Button>Button</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>

禁用状态

使用 disabled 属性来禁用交互和焦点：

jsx

<Button disabled variant="solid" startDecorator={<Add />}>Solid</Button>
<Button disabled color="neutral" variant="soft" startDecorator={<Add />}>Soft</Button>
<Button disabled color="success" variant="outlined" startDecorator={<Add />}>Outlined</Button>
<Button disabled color="danger" variant="plain" startDecorator={<Add />}>Plain</Button>

加载状态

添加 loading 属性来显示按钮的加载状态。按钮在加载期间会被禁用。

jsx

<Button loading variant="solid">Solid</Button>
<Button loading variant="soft">Soft</Button>
<Button loading variant="outlined">Outlined</Button>
<Button loading variant="plain">Plain</Button>

变体

Button 组件支持 Joy UI 的四种全局变体：

solid（默认）
soft
outlined
plain

jsx

<Button variant="solid">Solid</Button>
<Button variant="soft">Soft</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="plain">Plain</Button>

尺寸

Button 组件提供三种尺寸：

sm（小）
md（中，默认）
lg（大）

jsx

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

颜色

通过 color 属性可以使用主题中包含的每种调色板：

primary
neutral
danger
success
warning

可以尝试将不同颜色与不同变体组合使用。

装饰器

使用 startDecorator 和 endDecorator 属性在按钮两侧添加操作和图标：

jsx

<Button startDecorator={<Add />}>Add to cart</Button>
<Button endDecorator={<KeyboardArrowRight />} color="success">
  Go to checkout
</Button>

加载指示器

默认加载指示器使用 Circular Progress 组件。使用 loadingIndicator 属性可以替换为自定义指示器：

jsx

<Button loading>Default</Button>
<Button loading loadingIndicator="Loading…">Custom</Button>

加载位置

loadingPosition 属性设置加载指示器的位置，支持三个值：

center（默认）：加载指示器嵌套在 loadingIndicatorCenter 插槽中，加载状态时替换按钮内容
start：加载状态时替换起始装饰器
end：加载状态时替换结束装饰器

jsx

<Button loading loadingPosition="start">Start</Button>
<Button loading loadingPosition="end" endDecorator={<SendIcon />}>End</Button>

链接按钮

如果需要按钮样式但具有链接功能，可以使用 component 属性将默认的 <button> 替换为 <a>：

jsx

<Button component="a" href="#as-link" startDecorator={<OpenInNew />}>
  Open in new tab
</Button>
<IconButton aria-label="Open in new tab" component="a" href="#as-link">
  <OpenInNew />
</IconButton>

文件上传

要创建文件上传按钮，使用 component="label" 将按钮转换为标签，然后创建一个视觉上隐藏的 file 类型输入：

jsx

<Button component="label">
  Upload a file
  <input type="file" style={{ display: 'none' }} />
</Button>

图标按钮

使用 Icon Button 组件创建方形按钮来容纳图标，不包含文本内容：

jsx

import IconButton from '@mui/joy/IconButton';

<IconButton>
  <FavoriteBorder />
</IconButton>

CSS 变量

Button 和 Icon Button 组件提供了丰富的 CSS 变量用于自定义样式：

Button 变量

--Button-gap：按钮内部元素间距

Icon Button 变量

--IconButton-size：图标按钮尺寸

这些 CSS 变量可以通过 sx 属性或主题进行自定义。

可访问性

所有按钮必须具有有意义的 aria-label，以便屏幕阅读器能够正确识别按钮的功能。

API 参考

属性	类型	默认值	说明
variant	'solid' \| 'soft' \| 'outlined' \| 'plain'	'solid'	按钮变体
size	'sm' \| 'md' \| 'lg'	'md'	按钮尺寸
color	'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'	'primary'	按钮颜色
disabled	boolean	false	是否禁用
loading	boolean	false	是否加载中
loadingPosition	'center' \| 'start' \| 'end'	'center'	加载指示器位置
startDecorator	ReactNode	-	起始装饰器
endDecorator	ReactNode	-	结束装饰器
component	elementType	'button'	根组件

字节笔记本