Form
Toggle
Pressable button with persistent on/off state. Reach for it for modal state on a single control — bold/italic in an editor, sidebar visibility, favorite star.
Examples
Standalone (bind:pressed)
<Toggle bind:pressed={bold}>Bold</Toggle>
<Toggle bind:pressed={italic} variant="outline">Italic</Toggle>Sizes
<Toggle size="sm">Small</Toggle>
<Toggle>Default</Toggle>Disabled
<Toggle disabled>Disabled</Toggle>Props
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | false | Bindable on/off state. Use bind:pressed. |
onPressedChange | (next: boolean) => void | — | Fires when state flips (the controlled-pattern callback). |
variant | 'default' | 'outline' | 'default' | Default fills when pressed; outline always shows a border. |
size | 'sm' | 'md' | 'md' | Compact (24) or default (30). |
...rest | HTMLButtonAttributes | — | Spread onto the underlying <button>. |
Install
CLI
npx @a3tai/mittsu add toggle