跳到主要内容

按钮

用于触发操作，如表单提交、事件响应等。

一、何时使用​

  • 承载一个或一组用户操作指令。
  • 响应用户点击行为，触发对应的业务逻辑。

二、属性说明​

1. 功能配置​

1）显示标签​

用于设置按钮显示的文字内容。

显示标签

2）按钮图标​

可在按钮中添加图标，增强视觉提示性。

按钮图标

3）交互类型​

配置按钮的行为类型：

交互类型

  • 按钮：触发自定义点击事件，不会提交表单。
  • 提交：提交所在表单容器中的数据。
  • 重置：清空按钮所包裹的表单容器中的内容。

2. 外观配置​

1）类型​

可设置按钮的风格类型：

  • 默认
  • 主要
  • 成功
  • 警告
  • 危险

按钮类型

2）尺寸​

提供四种尺寸选项：迷你、小、中、大。

按钮尺寸

3）形状​

按钮形状选项包括：默认、方形、圆形。

按钮形状

4）满宽​

启用后，按钮将根据父容器宽度自动伸展。

按钮满宽

5）朴素按钮​

启用后，按钮将显示为边框 + 文字颜色的轻量样式。

朴素按钮

3. 状态说明​

按钮组件无特殊状态，通用状态说明详见：通用状态。

按钮状态

三、样式​

按钮无特殊样式配置，详见：通用样式。

四、常见使用场景​

1）普通按钮​

普通按钮

2）改变按钮类型/样式​

样式变更

3）仅图标按钮​

常用于空间紧凑区域，如工具栏。

图标按钮

4）表单提交按钮​

点击后提交当前表单容器中的数据。

表单提交