基本定义
类型
按钮类型分为:重要按钮、次级按钮、三级按钮、Ghost 按钮
构成元素
按钮构成元素通常为文本/图标组成,文本/图标构成按钮的显示内容,可单独出现,也可组合出现。
- 纯文本按钮
- 左侧图标+文本
- 纯图标按钮
- 左侧图标+文本+右侧图标
交互状态
- PC:不同类型的按钮共有默认、悬停、聚焦、禁用 4 种状态
- Mobile:不同类型的按钮共有默认、点击、禁用 3 种状态
尺寸
不同类型的按钮均有大,中,小三类尺寸
用法
什么时候使用
在CabinX内,按钮大部分场景是在容器/组件内使用,并遵循各自依附的容器/组件规则。在条件允许的情况下,可以用于自定义功能。
容器操作区
在容器内,通常会有固定的Action区域承载按钮;且不同的容器,会对容器按钮的类型,数量等有不同对应的限制规则。
Drawer容器内按钮(PC)
Drawer容器内按钮(Mobile)
组件内部使用
由于组件的不同特点和多样性,往往在不同的组件内,按钮所在位置,类型也不尽相同
Searchform 组件内按钮(PC)
Baseform 组件内按钮(Mobile)