A React toggle button with a Liquid Glass pressed thumb, optional label and icon, and five sizes.
Toggle renders the glass shell, selected thumb, optional icon and label, and exposes the pressed state through aria-pressed.
Use it for a single on/off action. For a set of related options, use ToggleGroup instead.
The toggle owns its state when pressed is omitted. Use defaultPressed to set the initial value; clicking or pressing Space/Enter flips it.
Pass pressed and onPressedChange to control the state externally. The callback also receives event details.
Not pinned.
Supports xs / sm / md / lg / xl, defaulting to md. Height, padding, type, and icon size scale together.
Omit label to render a square icon button. Provide an accessible name with aria-label.
disabled stops pointer and keyboard interaction and dims the control.
The component supplies the button role, aria-pressed, keyboard activation, and disabled behavior. Space or Enter toggles the focused control.
When label is present it contributes to the accessible name; icon-only toggles need aria-label or aria-labelledby. See the accessibility guide for naming patterns.
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | — | Controlled pressed state. |
defaultPressed | boolean | false | Initial pressed state when uncontrolled. |
onPressedChange | (pressed, details) => void | — | Called when the pressed state changes. |
disabled | boolean | false | Disables the toggle. |
value | string | — | Identifies the toggle when it is used inside a toggle group. |
nativeButton | boolean | true | Whether the rendered element is a native <button>. |
render | ReactElement | ((props, state) => ReactElement) | — | Replaces the rendered element. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Control size. |
label | ReactNode | — | Visible label rendered inside the toggle. |
icon | ReactNode | — | Decorative icon rendered before the label. |
className | string | — | Tailwind classes merged into the toggle root. |
style | CSSProperties | — | Inline styles merged into the same element as className. |
ui | { root?: ClassValue; glass?: ClassValue; rim?: ClassValue; thumb?: ClassValue; content?: ClassValue; icon?: ClassValue; label?: ClassValue } | — | Tailwind classes for internal slots, keyed by data-slot. |
ref | Ref<HTMLButtonElement> | — | Ref forwarded to the rendered button. |
| Attribute | Description |
|---|---|
data-pressed | Present when the toggle is pressed. |
data-disabled | Present when the toggle is disabled. |
data-slot | Marks internal parts (root, glass, rim, thumb, content, icon, label) for styling. |
The component uses the shared glass material. Tune shared --ui-glass-* tokens on a parent, use className for layout, and use ui for internal slots keyed by data-slot. Component-specific values live in src/theme/toggle.ts. See the theming guide for token layers and presets.