Button 把操作的语义类型和视觉层级分开。同一套 API 在 Brutal 和 Elegant 主题下行为完全一致，只是外观不同。ButtonGroup 把相关的操作连成一组，可以统一尺寸，但不改变每个按钮的语义类型。

#演示

每种行为都是单独的 TSX 示例和预览，看某一节的源码时不用翻一整页无关的代码。

#类型与层级

对比八种语义类型在 solid、secondary、tertiary、quaternary 四个层级下的样子。

#尺寸与形状

tiny、small、medium、large 严格对应 22 / 28 / 34 / 40px 的高度。round 和 circle 是独立的形状控制。

#外观

ghost、dashed、text、borderless、strong 和 block 共用同一套语义类型 API。多个层级开关同时设置时，按固定的优先级决定最终外观。

#图标

可以传 React 节点或渲染函数，图标放左边或右边，也可以做只有图标的按钮。

#发送操作

type="accent" 是操作色，也就是 rUI 的粉色，用在一个界面就是为它而存在的那个操作上，比如发送消息。在输入框里按回车即可发送。

#加载与禁用

加载状态使用 Raft UI 的 Spinner，保留文字和焦点，同时阻止鼠标和键盘触发，但不设置原生的 disabled 属性。计数器可以直接看到输入被拦下。

#自定义颜色

为个别产品需求覆盖语义填充色和文字色。

#标签、焦点与键盘

渲染成原生链接或自定义元素，控制是否参与 Tab 导航和键盘触发，兼容 Safari 点击后的焦点，并显式指定原生表单类型。

#按钮组

按钮组把相邻的操作连在一起，提供统一尺寸，支持横向和竖向排列，但不接管语义类型。

#Props

#Button

secondary、tertiary、quaternary、ghost、dashed、text 都是独立的布尔值。同时设置多个时按这个顺序生效：text → dashed → ghost → secondary → tertiary → quaternary → solid。原生属性、事件和 ref 的类型由 tag 推导；原生表单行为用 attrType。Button 和 ButtonGroup 的全部公开类型都在组件的 public-types.ts 里。加载状态使用公开的 Spinner：Brutal 是硬边的圆环，Elegant 是两层圆的 SVG 弧线，Button 负责保留文字并阻止触发。点击波纹只属于 Elegant，Brutal 里刻意没有；secondary、tertiary、quaternary 这些安静的外观也不显示波纹。

#ButtonGroup

ButtonGroup 支持原生 div 属性和 ref。请用 aria-label 或 aria-labelledby 给每个按钮组一个无障碍名称。