一个 React 切换按钮，采用 Liquid Glass 选中滑块、可选标签与图标以及五种尺寸。
Toggle 内部渲染玻璃外壳、选中滑块、可选图标与标签，并通过 aria-pressed 暴露按下状态。
适合单个开/关操作。需要一组相关选项时，请使用 ToggleGroup。
不传 pressed 时，Toggle 自己维护状态。defaultPressed 设置初始值；点击或按 Space/Enter 都会切换。
传入 pressed 与 onPressedChange，由外部状态控制。回调还会收到事件详情。
Not pinned.
支持 xs / sm / md / lg / xl，默认 md。高度、内边距、字号和图标尺寸会一起缩放。
不传 label 时会渲染方形图标按钮。请使用 aria-label 提供可访问名称。
disabled 会停止指针与键盘交互，并淡化控件。
组件提供 button 角色、aria-pressed、键盘激活与禁用行为。Space 或 Enter 切换当前控件。
存在 label 时，它会参与可访问名称；纯图标 Toggle 需要 aria-label 或 aria-labelledby。命名模式见可访问性指南。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
pressed | boolean | — | 受控的按下状态。 |
defaultPressed | boolean | false | 非受控时的初始按下状态。 |
onPressedChange | (pressed, details) => void | — | 按下状态变化时调用。 |
disabled | boolean | false | 禁用 Toggle。 |
value | string | — | 在 toggle group 内标识该 Toggle。 |
nativeButton | boolean | true | 是否渲染原生 <button>。 |
render | ReactElement | ((props, state) => ReactElement) | — | 替换渲染的元素。 |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | 控件尺寸。 |
label | ReactNode | — | 渲染在控件内部的可见标签。 |
icon | ReactNode | — | 标签前的装饰性图标。 |
className | string | — | 合并到 Toggle 根元素的 Tailwind 类名。 |
style | CSSProperties | — | 内联样式，合并到与 className 相同的元素。 |
ui | { root?: ClassValue; glass?: ClassValue; rim?: ClassValue; thumb?: ClassValue; content?: ClassValue; icon?: ClassValue; label?: ClassValue } | — | 按 data-slot 组织的内部槽位类名。 |
ref | Ref<HTMLButtonElement> | — | 透传到渲染按钮的 ref。 |
| 属性 | 说明 |
|---|---|
data-pressed | Toggle 按下时存在。 |
data-disabled | Toggle 禁用时存在。 |
data-slot | 标记内部部件（root、glass、rim、thumb、content、icon、label），用于样式选择。 |
组件使用共享玻璃材质。可以在父级调整 --ui-glass-* token，用 className 控制布局，并通过 ui 按 data-slot 调整内部槽位。组件级数值位于 src/theme/toggle.ts。Token 分层与预设见主题指南。