按钮

通过清晰的视觉层级触发操作。下方可对比所有样式和尺寸。

交互预览

调整参数，体验与本站其他位置相同的按钮组件。

已触发 0 次

参数

children: 按钮文字；为空且传了 icon 时变为纯图标按钮; ReactNode
variant: 视觉样式，默认 primary; TButtonVariant
tone: 语气色；primary 样式下为整块底色，其他样式只改文字色; TButtonTone
size: 尺寸：sm 24px、default 28px、lg 32px、xl 44px、icon 40px 方形; TButtonSize
disabled: 禁用，不可点击并降低透明度; boolean
loading: 加载中，自动禁用并显示旋转图标，按钮宽度保持不变; boolean
loadingText: 加载时显示在图标旁的文字; ReactNode
icon: 前置图标，统一设为 16px（lg 为 18px）; ReactNode
suffix: 后置图标，统一设为 16px; ReactNode

样式 × 尺寸

组件实现和此对照矩阵共用一份变体定义。

样式 × 尺寸
按钮	小 sm	默认 default	大 lg	特大 xl
主要`primary`
描边`outline`
次要`secondary`
幽灵`ghost`
链接`link`
文字操作`text-action`
胶囊描边`outlined`

语气

tone 与 variant 组合使用；primary 时为整块底色，其他样式只改文字颜色。

primary

outline

ghost

常用状态

默认

禁用

加载中

带图标

仅图标

使用说明

基础用法

Demo.tsx

import { Button } from '@apeiron/ui';

export function Demo() {
  return <Button onClick={() => console.log('saved')}>保存更改</Button>;
}

样式与尺寸

variant 控制视觉样式，size 控制尺寸，默认 primary + default。

Demo.tsx

<Button variant="primary">主要</Button>
<Button variant="outline">描边</Button>
<Button variant="ghost" size="sm">幽灵</Button>
<Button variant="link">链接</Button>

危险与成功

通过 tone 表达语气；primary 样式下为整块底色，其他样式只改文字颜色。

Demo.tsx

<Button tone="destructive">删除</Button>
<Button variant="outline" tone="success">确认</Button>

图标与加载

只传 icon 不传文字时自动变为方形图标按钮，需补充 aria-label。

Demo.tsx

import { Plus, Trash2 } from 'lucide-react';

<Button icon={<Plus />}>添加项目</Button>
<Button variant="ghost" icon={<Trash2 />} aria-label="删除" />
<Button loading loadingText="保存中">保存</Button>

作为链接

asChild 把按钮样式应用到子元素上。

Demo.tsx

<Button asChild variant="outline">
  <a href="/settings">前往设置</a>
</Button>

基础规范

输入框