按钮
主按钮、次按钮、幽灵与危险操作，三档尺寸，图标可配置。
主操作、次要、幽灵与危险四种 variant，三档 size，图标通过 leadingIcon / trailingIcon 传入组件引用。下方预览是同一个 Button 的不同配置。
安装
npx @joyui/cli add button --yes或通过 JoyUI MCP / CLI 安装。
变体
通过 variant 切换语义色。
Primary
Secondary
Ghost
Danger
尺寸
medium（36px）· small（32px）· xs（24px）。
Medium
Small
Xs
图标
传入 Remix Icon 组件引用，不要传已渲染的元素。
应用场景
表单页脚或卡片工具栏：取消（ghost）+ 次要 + 主操作。
草稿已保存
API
Button
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| variant | 视觉语义：主操作 / 次要 / 幽灵 / 危险。 | "primary" | "secondary" | "ghost" | "danger" | primary · secondary · ghost · danger | primary |
| size | 高度：36 / 32 / 24px。 | "medium" | "small" | "xs" | medium · small · xs | medium |
| leadingIcon | 前置图标组件引用（传 RiXxx）。 | ComponentType | — | — |
| trailingIcon | 后置图标组件引用。 | ComponentType | — | — |
| iconOnly | 仅图标；需 aria-label。 | boolean | true · false | false |
| disabled | 禁用。 | boolean | true · false | false |
| children | 按钮文案。 | ReactNode | — | — |
| className | 合并到根节点的额外类名。 | string | — | — |