Button 按钮
type负责视觉类型，color负责主题色，再用shape、icon、loading补足交互细节。
何时使用
- 需要一个通用操作按钮，并希望颜色、类型、形状和状态能拆开表达。
- 需要在表单里区分视觉类型
type和原生提交类型htmlType。 - 需要统一处理图标按钮、加载按钮、链接按钮和整行按钮。
# 类型
type 现在直接对应视觉类型。
# 响应式尺寸
把基础的响应式按钮演示保持回来，统一改成 size + className 的方式。
# 颜色色板
颜色演示展示，但统一改成 color 语义。
# 风格矩阵
把基础的 soft、outline、dash 演示融合成统一的 type 展示。
# 危险态
danger 是快捷开关，也可以直接通过 color='danger' 控制。
# 图标与图标位置
icon 和 iconPlacement 用来组织图标按钮与带文案按钮。
# 加载状态
loading 会锁定按钮；对象写法可以替换默认加载图标。
# 点击事件
onClick 会透传原生点击事件，适合命令触发、埋点和分组按钮内交互。
# 尺寸与形状
size 管尺寸，shape 管轮廓形态。
# 按钮组合
提供与常见 ButtonGroup 类似的分组能力，这里统一用 Button.Group。
# 状态与布局
把基础的 active、disabled、wide、block 示例也融合到当前页面。
# 根节点与表单行为
默认渲染 button，同时保持链接根节点、div 根节点和表单行为示例。
# 场景组合
把图标、变体、布局属性组合在一起，可以很快搭出操作条。
# 登录按钮
把基础的 provider 登录按钮演示融合回来，统一改成 icon + block + className 的新 API 写法。
API
当前页面展示的是 Button 与 Button.Group 的完整可用 API。
推荐使用顺序：type->color->shape-> size->loading->disabled。
Button
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
active | 激活态，追加 btn-active | boolean | false |
as | 指定渲染标签，可选 button、a、div | 'button' | 'a' | 'div' | 'button' |
block | 整行按钮，宽度撑满容器 | boolean | false |
color | 颜色层，danger 会映射到 error 按钮色 | 'default' | 'danger' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'default' |
danger | 危险态快捷开关，未设置 color 时等价于 color="danger" | boolean | false |
disabled | 禁用按钮；a 和 div 根节点也会输出禁用语义 | boolean | false |
href | 传入后默认以 a 标签渲染 | string | - |
htmlType | 原生 button 的 type | 'button' | 'submit' | 'reset' | 'button' |
icon | 图标节点 | any | - |
iconPlacement | 图标位置 | 'start' | 'end' | 'start' |
loading | 支持 boolean 或对象写法，可自定义加载图标 | boolean | { delay?: number; icon?: any } | false |
onClick | 点击按钮时的回调；disabled 或 loading 时不会触发 | (event: MouseEvent) => void | - |
shape | 按钮形状 | 'default' | 'square' | 'circle' | 'round' | 'default' |
size | 尺寸，支持 xs 到 xl，以及 small / middle / large 别名 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'middle' | 'medium' | 'large' | - |
target | 链接目标窗口，仅 a 标签生效 | string | - |
type | 视觉类型，直接替代基础的 variant 语义 | 'solid' | 'filled' | 'outlined' | 'dashed' | 'text' | 'link' | 'solid' |
wide | 宽按钮，追加 btn-wide | boolean | false |
Button.Group
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定按钮组根节点标签 | any | 'div' |
size | 统一同步组内按钮尺寸 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'middle' | 'medium' | 'large' | - |
shape | 统一同步组内按钮轮廓；circle 在分组场景下会映射为圆角组合样式 | 'default' | 'square' | 'circle' | 'round' | - |
direction | 按钮组排列方向 | 'horizontal' | 'vertical' | 'horizontal' |
block | 让按钮组宽度撑满容器 | boolean | false |
className | 自定义根节点类名 | string | - |
FAQ
为什么有 type 还需要 htmlType？
type负责按钮视觉类型，htmlType负责原生 button 行为。视觉和提交语义拆开之后， 表单场景会更直接。
type 和 color 应该怎么分工？
type负责视觉类型，比如outlined、filled、text。color负责主题色，比如primary、secondary、danger。
大多数场景可以先定颜色， 再根据密度和层级选择solid、outlined、filled或text。
loading 对象里的 delay 会生效吗？
当前组件支持loading的对象写法和自定义icon。delay字段已保持在配置结构里，后续如果补充延迟显示策略，可以直接在当前接口上继续扩展。
Button.Group 会覆盖子按钮哪些属性？
组级只会统一同步size和shape，方便在一组按钮上集中控制尺寸和轮廓。 每个子按钮自己的color、type、disabled、onClick仍然在各自的 Button上配置。