跳到主要内容
button
按钮用于触发一个操作或事件,例如提交表单或关闭对话框,按钮是用于执行操作的可点击对象,按钮内文本/图标表示当用户与其交互时会发生什么,按钮可以有不同的样式,以适应不同的场景。

基本定义

类型

按钮类型分为:重要按钮、次级按钮、三级按钮、Ghost 按钮

构成元素

按钮构成元素通常为文本/图标组成,文本/图标构成按钮的显示内容,可单独出现,也可组合出现。

  1. 纯文本按钮
  2. 左侧图标+文本
  3. 纯图标按钮
  4. 左侧图标+文本+右侧图标

交互状态

  • PC:不同类型的按钮共有默认、悬停、聚焦、禁用 4 种状态
  • Mobile:不同类型的按钮共有默认、点击、禁用 3 种状态

尺寸

不同类型的按钮均有大,中,小三类尺寸

用法

什么时候使用

在CabinX内,按钮大部分场景是在容器/组件内使用,并遵循各自依附的容器/组件规则。在条件允许的情况下,可以用于自定义功能。

容器操作区

在容器内,通常会有固定的Action区域承载按钮;且不同的容器,会对容器按钮的类型,数量等有不同对应的限制规则。 Drawer容器内按钮(PC) Drawer容器内按钮(Mobile)

组件内部使用

由于组件的不同特点和多样性,往往在不同的组件内,按钮所在位置,类型也不尽相同 Searchform 组件内按钮(PC) Baseform 组件内按钮(Mobile)