Components

Button 按钮

六种清晰的视觉层级，配合主色、中性与语义色，覆盖核心操作、次要操作与低干扰链接。

变体

solid / outline / soft / subtle / ghost / link 六种层级。

<Button variant="solid" color="primary">Solid</Button>
<Button variant="outline" color="primary">Outline</Button>
<Button variant="soft" color="primary">Soft</Button>
<Button variant="subtle" color="primary">Subtle</Button>
<Button variant="ghost" color="primary">Ghost</Button>
<Button variant="link" color="primary">Link</Button>

色彩

主色、中性与语义错误 / 警告 / 成功色。

<Button variant="solid" color="primary">Primary</Button>
<Button variant="solid" color="neutral">Neutral</Button>
<Button variant="solid" color="error">Error</Button>
<Button variant="soft" color="success">Success</Button>
<Button variant="soft" color="warning">Warning</Button>

尺寸与状态

从 xs 到 lg 四档高度，内置 loading 与 disabled 态。

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>

带图标

使用 leading / trailing 图标插槽。

<Button variant="solid" color="primary">
  <template #leading><Cloud class="h-4 w-4" /></template>
  部署节点
</Button>
<Button size="icon" aria-label="设置">
  <Settings class="h-4 w-4" />
</Button>

API 参考

属性	类型	默认值	说明
`variant`	`'solid' \| 'outline' \| 'soft' 'ghost' \| 'subtle' \| 'link'`	`solid`	视觉层级。
`color`	`'primary' \| 'neutral' \| 'error' 'warning' \| 'success'`	`primary`	语义与品牌色。
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'icon'`	`md`	高度；icon 为正方形图标按钮。
`loading`	`boolean`	`false`	显示旋转图标并禁用交互。
`disabled`	`boolean`	`false`	禁用状态。
`block`	`boolean`	`false`	撑满父容器宽度。
`leading`	`slot`	`—`	左侧图标插槽。
`trailing`	`slot`	`—`	右侧图标插槽。