Button

按钮（Button）用于触发即时操作，是用户界面中最常用的交互元素之一。

import { Button, ButtonIcon, ButtonGroup } from '@skyroc/web-ui';

何时使用

• 当需要一个即时操作的触发器时，使用按钮。
• 主按钮在同一操作区域建议最多出现一次，突出最重要的行动。
• 多个按钮组合时，推荐 1 个主操作 + N 个次级操作，超过 3 个可使用 Dropdown 收纳。

颜色

按钮提供 8 种主题颜色，每种颜色都有其语义含义：

变体

通过 variant 控制按钮的视觉强度，从高到低依次为：

尺寸

通过 size 调整按钮大小，从 xs 到 2xl 共 6 个尺寸。

形状

通过 shape 控制按钮的圆角形态。

阴影

通过 shadow 控制按钮投影。默认值为 sm，ghost 和 link 变体会自动忽略阴影。

禁用

设置 disabled 后，按钮变为不可交互状态，同时降低透明度。

加载

设置 loading={true} 时，按钮自动禁用并在 leading 位置显示旋转图标。如果你已经为 leading 传入了自定义内容，加载状态会保留你的内容而不替换为默认 Spinner。

插槽

通过 leading 和 trailing 插槽在按钮文字前后放置图标或其他内容。

图标按钮

ButtonIcon 是专门为纯图标场景封装的组件。相比 Button，它默认使用 ghost 变体、square 形状和 accent 颜色，并通过 fitContent 让尺寸自适应内容。

设置 fitContent={false} 可以恢复为固定尺寸。

按钮组

ButtonGroup 将多个按钮组合成一个视觉整体，自动处理圆角合并和相邻边框去重。

通过 orientation 控制排列方向：

API

Button

通用属性参考：支持原生 button 元素的所有属性。

ButtonIcon

继承 Button 的全部 Props，并新增以下属性：

ButtonIcon 的默认值与 Button 不同：variant="ghost"、shape="square"、color="accent"、fitContent={true}。

ButtonGroup

类型