Toggle
Two-state pressable button. Use inside toolbars for formatting controls (bold, italic, align).
Default
Pressable two-state button.
Variants
default and outline.
Sizes
sm, default, lg.
API Reference
Props, events, and slots for each sub-component.
Toggle
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | boolean | false | Pressed state. Supports v-model. |
| defaultValue | boolean | false | Initial state. |
| variant | "default" | "outline" | "default" | Visual style. |
| size | "sm" | "default" | "lg" | "default" | Size variant. |
| disabled | boolean | false | Disable input. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires when the pressed state toggles. Enables v-model. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Space | Toggles the pressed state when focused. |
| Enter | Toggles the pressed state when focused. |
| Tab | Moves focus to or from the toggle. |
- aria-pressed reflects the on/off state.
- Provide accessible text or an aria-label when the toggle is icon-only.