关闭按钮
圆形 ✕，四种可配置尺寸，用于公告、吐司、模态与抽屉。
圆形 ✕，用于关闭紧凑表面、公告、吐司、模态框和抽屉。每个尺寸用自己的笔画画字形——2xs 为 1.6px，xs / sm 为 2px，md 为 2.5px——权重保持像素真实，而不是缩放同一图标。
通过 size 切换款式；下面预览是同一个 CloseButton 的四种配置。
安装
npx @joyui/cli add close-button --yes或通过 JoyUI MCP / CLI 安装。
尺寸
四种尺寸由 size 控制：16、20、24、32 像素。控件没有可见文字，请始终传入 aria-label。
2xs
xs
SM
MD
<CloseButton size="2xs" aria-label="Close" /> {/* 16px, 1.6px stroke */}
<CloseButton size="xs" aria-label="Close" /> {/* 20px, 2px stroke */}
<CloseButton size="sm" aria-label="Close" /> {/* 24px, 2px stroke */}
<CloseButton size="md" aria-label="Close" /> {/* 32px, 2.5px stroke */}在模态标题中
模态标题
<header className="flex items-center justify-between p-4">
<p className="text-body-medium text-text-primary">模态标题</p>
<CloseButton size="md" aria-label="关闭模态框" onClick={onClose} />
</header>API
CloseButton
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 点击区域与笔画权重。每种尺寸单独绘制 ✕，避免缩放导致线宽失真。 | "2xs" | "xs" | "sm" | "md" | 2xs · xs · sm · md | xs |
| aria-label | 无障碍名称（必填）。控件没有可见文字。 | string | — | — |
| className | 合并到根按钮上的额外类名。 | string | — | — |
| onClick | 点击回调；其余原生 button 属性均可传入。 | MouseEventHandler | — | — |