Button
操作触发器，支持变体、尺寸和形状选项。与 LinkButton 共享样式。
安装
npx @cloudflare/nimbus-docs add buttonyarn dlx @cloudflare/nimbus-docs add buttonpnpm dlx @cloudflare/nimbus-docs add buttonbunx @cloudflare/nimbus-docs add button预览
<Button variant="primary">保存</Button>示例
变体
六种意图，适用于不同强调级别和风险程度。
<Button variant="primary">主要</Button>
<Button variant="secondary">次要</Button>
<Button variant="ghost">幽灵</Button>
<Button variant="outline">轮廓</Button>
<Button variant="destructive">危险</Button>
<Button variant="secondary-destructive">次要危险</Button>尺寸
四种尺寸，从紧凑工具栏到醒目的行动号召按钮。
<Button size="xs">超小</Button>
<Button size="sm">小</Button>
<Button size="base">默认</Button>
<Button size="lg">大</Button>带图标
向 icon 传入 Iconify 名称可渲染前导图标。
<Button variant="primary" icon="ph:plus">创建</Button>
<Button variant="secondary" icon="ph:download-simple">下载</Button>纯图标
使用 shape="square" 或 shape="circle" 创建纯图标按钮，并始终传入 aria-label。
<Button shape="square" icon="ph:gear" aria-label="设置" />
<Button shape="circle" icon="ph:heart" aria-label="点赞" />加载状态
loading 会将图标替换为加载动画并禁用按钮。
<Button variant="primary" loading>保存中…</Button>API 参考
组件接受的全部属性，均源自单一声明。
| Prop | Type |
|---|---|
variant | "primary" | "secondary" | "ghost" | "destructive" | "secondary-destructive" | "outline" |
size | "xs" | "sm" | "base" | "lg" |
shape | "base" | "square" | "circle" |
icon | string |
loading | boolean |