通用·Button

按钮

用户使用按钮来触发一个操作或者进行跳转。

代码演示

按钮类型

• 主按钮（"primary"，默认）
• 次要按钮（"secondary"）
• 第三按钮（"tertiary"）
• 警告按钮（"warning"）
• 危险按钮（"danger"）

关于类型字体色值

按钮的字体色值使用的都是 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：无背景模式
• outline：边框模式

深色背景

浅色背景

无背景

边框模式

按钮主题

默认定义了三种尺寸：

• 大："large"
• 中(默认)："medium"
• 小："small"

按钮主题

默认定义了三种尺寸：

禁用按钮

图标按钮

可定义按钮的图标。

加载状态

按钮支持加载状态，通过设置 loading 参数值为 true 即可，注意：disabled 状态优先级高于 loading 状态。

按钮组合

可以将多个按钮放入ButtonGroup的容器中。

组合尺寸

组合方向

组合禁用

组合类型

PlayGround代码沙盒

可以在代码中使用上述所有出现的组件功能