如何使用

  1. 按钮的样式需要有可点击的能供性；
  2. 用户能从按钮上清晰得预测出行为结果。

解构

根据按钮中的内容，按钮可以分为 图标按钮 / 文本按钮 / 图标&文本按钮。 按钮中，必须包含以下元素中的其中一个元素。
类型
  1. 图标：图标可以帮助用户更快地定位到这个动作，起到强调的作用。图标与文本一起可以传达更准确的信息。图标的位置可以在左边或右边；
  2. 文本（可选）：传达这个动作的预期效果，通常是为动宾结构（即“谓语+宾语”）。编写按钮文本时，尽量使用户能够通过文本预测到触发这个按钮的结果。

Components Demo

✅ ️ Figma Variants

单色按钮 Solid Button

单色按钮（theme=solid） 在整个按钮体系中，强调作用最为明显。一般用于最主要的按钮使用。 如果同时存在多个按钮时，或者在一个按钮组中，单色按钮建议仅存在一个。

浅色按钮 Light Button

浅色按钮（theme=light）是中等强调的的按钮，适用于一些普通功能的按钮。

无背景按钮 Borderless Button

浅色按钮（theme=Borderless）是在按钮体系中强调作用最弱。

按钮主题的强调作用

不同主题有不同的强调作用。 一个应用程序一次可以在一个布局中显示多个按钮，因此高重点按钮可以伴随着执行不太重要的操作的中低重点按钮。使用多个按钮时，确保一个按钮的可用状态看起来不像另一个按钮的禁用状态。
类型

按钮类型

按钮类型即按钮在不同主题下的提示状态，根据提示的程度和危险程度按钮类型分为 主要 (Primary) / 次要 (Secondary) / 第三 (Tertiary) / 警告 (Warning) / 危险 (Danger)
单色按钮 Solid
浅色按钮 Light
无背景按钮 Borderless

按钮尺寸

在不同的使用场景下，按钮通常会有不同的尺寸。 Semi 对按钮组件提供了 大（Large） / 中（Default） / 小（Small） 三种常用的尺寸。

块级按钮 Block Button

块级按钮具有预先定义好的宽度，它的宽度与按钮里面内容的宽度无关。

按钮组合

在一些特定的场景下，需要将相同主题类型的按钮组合进行使用。

分裂按钮

在Button和Dropdown结合的场景下，可以使用分裂按钮，分裂按钮添加了按钮之间的间隔，并改变了按钮的边框圆角。