Button

Ripple

按钮是 PC 端最重要的组件,常用于单击操作。分为“主按钮”、“幽灵按钮”、“扁平按钮”,每种按钮都有不同状态,点击时可以触发 Ripple 效果。

按钮尺寸

按钮分为两种尺寸:“大型按钮”、“小型按钮”

“大型按钮”是默认尺寸,高度为 40px,“小型按钮”高度为 32px。

只提供两种尺寸大小,避免用户纠结在尺寸问题。布局宽松时使用大尺寸按钮,布局紧凑时使用小尺寸按钮即可。

按钮尺寸

大型按钮

每个按钮分为四种状态:

“正常状态”: 按钮的初始状态

“hover 状态”: 鼠标悬停于按钮上方的时候发生背景色的变化

“active 状态”: 按钮被按下的时候发生背景色的变化

“禁止点击状态”: 用户无法点击,不同类型按钮的禁止点击状态样式是一致的。

大型按钮

幽灵按钮

幽灵按钮正常状态是透明的

“hover 状态”: 鼠标悬停于按钮上方的时候发生背景色的变化

“active状态”: 按钮被按下的时候发生背景色的变化

幽灵按钮

扁平按钮

扁平按钮正常状态是透明背景、无边框的

“hover 状态”: 鼠标悬停于按钮上方的时候发生背景色的变化

“active状态”: 按钮被按下的时候发生背景色的变化

扁平按钮