Toggle

Toggle 用于表示一个可独立开关的双态操作，例如加粗、静音、收藏、开启某个工具状态。组件基于 Radix Toggle 封装，保留 pressed、defaultPressed、onPressedChange 等状态属性，并接入项目统一的尺寸和视觉变体。

import { Toggle } from '@skyroc/web-ui';

何时使用

• 需要让用户切换某个独立的开关状态，如文本加粗、筛选模式、工具启用。
• 状态本身可以通过按钮的按下态表达，不需要额外的表单提交。
• 多个选项可以独立开关时，可组合多个 Toggle；互斥单选场景更适合使用 Radio 或 Segment。
• 需要普通点击触发动作但不保留按下状态时，使用 Button。

基础用法

Toggle 会根据 Radix 的 data-state="on" 显示按下态。仅使用图标时应提供 aria-label。

<Toggle aria-label="Toggle bold">
  <Bold className="size-4" />
</Toggle>

变体

通过 variant 控制 Toggle 的基础视觉样式。当前实现提供 ghost 和 outline 两种变体，按下态都会使用 accent 背景。

<Toggle variant="outline">Outline</Toggle>

受控状态

通过 pressed 和 onPressedChange 控制 Toggle 状态。非受控场景可以使用 defaultPressed 设置初始按下态。

const [pressed, setPressed] = useState(false);

<Toggle pressed={pressed} onPressedChange={setPressed} />;

尺寸

通过 size 调整 Toggle 的高度、横向内边距和字号。默认尺寸为 md。

禁用

设置 disabled 后，Toggle 不可交互，并降低透明度。

<Toggle disabled>Disabled</Toggle>

API

Toggle

通用属性参考：继承 Radix Toggle Root 属性，并增加项目尺寸和视觉变体。

类型