Skip to content

Button 按钮

用于触发即时操作。一个操作区域中应优先只有一个主要按钮,危险操作使用明确的危险样式。

基础用法

使用 variant 表达操作层级,使用 size 适配界面密度。

加载与禁用

加载状态会阻止重复点击,并通过 aria-busy 向辅助技术表达处理中状态。

API

Props

属性说明类型默认值
variant操作层级"primary" | "secondary" | "ghost" | "danger""primary"
size按钮尺寸"small" | "medium" | "large""medium"
type原生按钮类型"button" | "submit" | "reset""button"
loading是否处于加载状态booleanfalse
disabled是否禁用booleanfalse
block是否占满容器宽度booleanfalse
icon内容前的 SVG Vue 图标组件Component

Events

事件说明参数
click可操作状态下点击按钮(event: MouseEvent)

Slots

插槽说明
default按钮文字或主要内容
icon内容前图标,优先于 icon 属性
leading内容前区域
trailing内容后区域

基于 MIT 许可发布