按钮

按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。

使用方法

使用 .btn 类来获得按钮的外观和交互体验，通常用在元素 <button> 或 <a> 上。

配合丰富的CSS 工具类来实现不同按钮的外观。

图标按钮

按钮配合图标组件一起使用时，自动呈现为图标按钮。

外观

外观类型

配合使用CSS 工具类来实现不同按钮的外观。下面展示各种工具类的外观效果。

按钮圆角

搭配 CSS 工具类 rounded-* 为按钮应用不同的圆角样式。

按钮阴影效果

搭配 CSS 工具类 shadow-* 为按钮应用不同的阴影样式。

尺寸

除了默认大小，按钮还提供了额外的 4 种预设尺寸。

形状

正方形按钮

通过工具类 square 可以让按钮获得正方形外观，通常作为图标按钮使用。

圆形按钮

当与工具类 circle 与 square 一起使用时则获得圆形按钮。

状态

禁用状态

为按钮提供 disabled="disabled" 属性或 disabled 工具类来禁用按钮。被禁用的按钮将无法响应点击事件。

激活状态

为按钮添加 active 类启用激活状态。

加载中状态

为按钮提供动画图标实现加载中状态。

CSS 类

按钮提供了如下 CSS 类：

类	类型	作用
btn	实体类	元素作为按钮组件
square	工具类	按钮使用正方形外观
size-xs	工具类	按钮使用超小号尺寸
size-sm	工具类	按钮使用小号尺寸
size-lg	工具类	按钮使用大号尺寸
size-xl	工具类	按钮使用超大号尺寸

CSS 变量

变量名称	变量含义
--btn-radius	按钮圆角
--btn-bg	按钮背景颜色
--btn-border-color	按钮边框颜色