按钮 / Button

常用按钮样式与用法示例。

样式变体

基础样式与层级展示。

示例代码

<Button>主要</Button>
<Button variant="secondary">次要</Button>
<Button variant="destructive">危险</Button>
<Button variant="ghost">幽灵</Button>

图标按钮

图标与文字组合。

示例代码

<Button className="gap-2">
  <Mail className="size-4" />
  消息
</Button>
<Button variant="outline" size="icon">
  <Plus className="size-4" />
</Button>

加载状态

配合 Spinner 的禁用状态。

示例代码

<Button className="gap-2" disabled>
  <Spinner className="size-4" />
  加载中
</Button>

Loading dashboard...