代码演示
如何引入
按钮类型
按钮支持以下类型：
- 主按钮（"primary"，默认）
- 次要按钮（"secondary"）
- 第三按钮（"tertiary"）
- 警告按钮（"warning"）
- 危险按钮（"danger"）
Semi 默认主题的 Primary 与 Secondary 颜色相同，但你可以通过自定义主题来实现不同的 Primary 与 Secondary 颜色。
关于类型字体色值
按钮的字体色值使用的都是 CSS Variables，分别为：
var(--semi-color-primary)：主要var(--semi-color-secondary)：次要var(--semi-color-tertiary)：第三var(--semi-color-warning)：警告var(--semi-color-danger)：危险
你可以直接使用这些主题色定义你的元素。
按钮主题
目前可用的主题（theme）为：
light：浅色背景solid：深色背景borderless：无背景
默认的主题为
light浅色背景
深色背景
无背景
尺寸
默认定义了三种尺寸：
- 大："large"
- 默认："default"
- 小："small"
块级按钮
块级按钮具有预先定义好的宽度，它的宽度与按钮里面内容的宽度无关。
图标按钮
可定义按钮的图标。
链接按钮
我们推荐使用 Typography 的 link 属性来实现链接型的文字按钮，具体用法详见Typography
禁用状态
加载状态
按钮支持加载状态，通过设置 loading 参数值为 true 即可，注意：disabled 状态优先级高于 loading 状态。
按钮组合
可以将多个按钮放入
ButtonGroup的容器中，通过设置size，disabled，type可统一设置按钮组合中的按钮尺寸，是否禁用和类型。组合尺寸
组合禁用
组合类型
分裂按钮组合
V1.12.0新增
在
Button和Dropdown结合的场景下，可以使用分裂按钮，分裂按钮添加了按钮之间的间隔，并改变了按钮的边框圆角基础使用
API 参考
Button
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| aria-label | 按钮的标签 | string | - |
| block | 将按钮设置为块级按钮 | bool | false |
| className | 类名 | string | |
| disabled | 禁用状态 | boolean | false |
| htmlType | 设置 button 原生的 type 值，可选值：button、reset、submit | string | "button" |
| icon | 图标 | ReactNode | |
| iconPosition | 图标位置，可选值：left|right | string | left |
| loading | 加载状态 | boolean | false |
| noHorizontalPadding | 设置水平方向是否去掉内边距，只对设置了 icon 的 Button 有效。可选值：true（等效于 ["left", "right"]），"left"，"right"，["left", "right"] | boolean|string|Array<string> | false |
| size | 按钮大小，可选值：large、default、small | string | "default" |
| style | 自定义样式 | CSSProperties | |
| theme | 按钮主题，可选值：solid（有背景色）、 borderless（无背景色）、 light（浅背景色） | string | "light" |
| type | 类型，可选值：primary、secondary、tertiary、warning、 danger | string | "primary" |
| onClick | 单击事件 | function(MouseEvent) | |
| onMouseDown | 鼠标按下事件 | function(MouseEvent) | |
| onMouseEnter | 鼠标移入事件 | function(MouseEvent) | |
| onMouseLeave | 鼠标移出事件 | function(MouseEvent) |
ButtonGroup
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| aria-label | 按钮组的标签 | string | - |
| disabled | 禁用状态 | boolean | false |
| size | 按钮大小，可选值：large、default、small | string | "default" |
| theme | 按钮主题，可选值：solid（有背景色）、 borderless（无背景色）、 light（浅背景色） | string | "light" |
| type | 类型，可选值：primary、secondary、tertiary、warning、 danger | string | "primary" |
| className | 自定义类名 | string |
SplitButtonGroup V1.12.0新增
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| aria-label | 分裂按钮组的标签 | string | - |
| style | 自定义样式 | CSSProperties | |
| className | 自定义类名 | string |
Accessibility
ARIA
aria-label用于表示按钮的作用，对于图标按钮，我们推荐使用此属性aria-disabled与 disabled 属性同步，表示按钮禁用
键盘和焦点
- Button 的焦点管理与原生 button 一致，键盘用户可以使用 Tab 及 Shift + Tab 切换焦点
- Button 的触发与原生 button 一致，当按钮聚焦时，可以通过 Enter 或 Space 键激活
- ButtonGroup 中的按钮与单个按钮的焦点管理方式一致，可以通过 Tab 以及 Shift + Tab 进行切换
设计变量
FAQ
为什么Button中的icon属性不起作用？
请检查你的Button import路径，正确的import路径应该为import { Button } from '@douyinfe/semi-ui;'，如果你错误地从 @douyinfe/semi-ui/button/button中import的话，获取到的是不带icon功能的基础Button组件
