Button 按钮

用于触发操作,点击后立即执行命令。

    交互演示

    该示例使您可以搭配不同配置选项来预览按钮组件,每个选项卡显示不同类型的按钮。

    通用原则

    • 在按钮中加图标时,图标必须能够帮助传达信息,不能只起到装饰作用

    • 按钮文字与按钮图标的颜色在各种情况下都保持一致

    • 每个页面通常只有一至两个首要按钮,给用户明确的操作指引

    • 不同按钮类型具有不同的强调程度,警示按钮的强调程度高于图中所有类型按钮:

    类型 等级
    首要按钮、组合按钮
    次要按钮
    轻浅按钮、文字按钮、图标按钮

    类型

    类型 何时使用
    首要按钮 1)用于强调的核心操作,等级程度①;2)可独立使用,也可与其他按钮搭配使用(除图标按钮);3)同一个界面中通常不超过 2 个。
    次要按钮 1)等级②次于首要按钮;2)可独立使用,也可以与其他按钮搭配使用(除图标按钮)。
    轻浅按钮 1)等级③次于次要按钮;2)不可独立使用,需搭配首要按钮/次要按钮使用。
    图标按钮 1)等级③,但视觉上占位空间少;2)可独立使用,也仅可与同类搭配使用。
    文字按钮 1)等级③,视觉上更轻量;2)可独立使用,也可与同类/首要按钮/次要按钮搭配使用。
    按钮组 多个按钮同时出现,且按钮间存在主次关系的时候使用。
    警示按钮 用于类似「删除」等危险操作的时候。

    首要按钮

    可搭配图标使用,图标必须在文字左边。

    次要按钮

    可搭配图标使用,图标必须在文字左边。

    轻浅按钮

    可搭配图标使用,图标必须在文字左边。

    图标按钮

    仅一个图标表达,通常需搭配 Tooltip 来解释图标的含义。优先考虑使用 Primary Icon Button,仅在容器空间不足或 hover 样式重叠的情况下使用 Secondary Icon Button。

    文字按钮

    必须搭配图标使用,图标必须在文字左边。

    按钮组

    默认展示的是主要操作,点击右侧「箭头」唤起 Menu控件,展示所有其他操作。可搭配图标使用,图标必须在文字左边。

    警示按钮

    在其他类型按钮的基础上,指定为警示色,引起用户警惕。

    构成

    1. 容器

    2. 图标

      1. 必须在文字左侧

      2. 图标颜色和文字颜色保持一致。

      3. 必须表意,帮助用户理解操作的含义

    3. 文字:不可折行,不可省略,字数不超过 5 个字为佳

    行为

    • 所有按钮类型都有:Default、Hover、Active、Loading、Disable

    • 若按钮所触发的操作不需要当前页面进行加载,则使用按钮本身的「加载指示器」来体现加载过程

    布局

    宽度适应容器

    • 当容器宽度小于 320px 时,可将按钮宽度进行对应的拉伸调整

    多按钮横向排列

    • 边框按钮横向排列时,M 尺寸按钮之间间距为 16px,S 尺寸按钮之间间距为 12px,XS 尺寸按钮之间为 8px

    • 当文案无法调整为相同字数,则可使用较大按钮的宽度,以保证按钮大小一致

    • 在多个按钮同时使用时,相近功能的按钮在页面位置上更近

    • 仅当多按钮位于容器左侧时,将重要操作靠左放置;其余情况请将重要操作靠右放置

    多按钮纵向排列

    • 当容器宽度较小时可考虑纵向排列

    • 当文案无法调整为相同字数,则可使用较大按钮的宽度,以保证按钮大小一致

    • 请将重要操作靠上放置

    • 多个按钮同时出现时,首要按钮对齐容器边界,并以首要按钮为起点,往容器内按钮等级依次递减

    • 多个按钮出现时候,必须遵守搭配组合逻辑,不可随意混合使用

    • 按钮间间距