Toggle
A two-state button that can be toggled on or off.
Import
import { Toggle } from "@retents/ui/toggle"Usage Guidelines
When to use
- For toolbar buttons that toggle a mode on/off, such as bold, italic, or mute.
- When the toggle represents an independent on/off action within a toolbar or control bar.
When NOT to use
- For form fields that submit with the form — use Checkbox instead.
- For settings that take effect immediately — use Switch instead.
- For a group of related toggles — use ToggleGroup instead.
Accessibility
Always provide an aria-label for icon-only toggles so screen readers can announce the action.
Preview
Off
Variants
- default — Subtle background change on press
- outline — Bordered variant with a more visible boundary
Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "default" | Visual style variant |
size | "default" | "sm" | "lg" | "default" | Toggle size |
pressed | boolean | — | Controlled pressed state |
onPressedChange | (pressed: boolean) => void | — | Callback when pressed state changes |