Actions
Toggle
A pressed/unpressed button, for standalone toggles like a toolbar formatting button or a favorite/bookmark action — pair multiple instances with your own shared state for exclusive selection.
<UiToggle />Options
One block per prop — what it does, and what it looks like set.
Model value
modelValue is whether the toggle is pressed, bound two-way with v-model. Its content can be an icon, a label, or both.
Size
size is the size of the toggle.
Variant
variant sets how the toggle looks once pressed. Unpressed it's always quiet, whatever this is set to.
Color
color is the pressed state's color.
Icon
icon is the icon inside the toggle — on its own, or beside a label.
Disabled
disabled disables interaction with the toggle.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
Exclusive selection
A view switcher, driven off one shared value rather than each toggle's own.
No built-in group
Toggle only tracks its own pressed state. For an exclusive set (like the view switcher above), drive each Toggle's model-value off shared state yourself rather than expecting radio-style behavior for free.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"solid" | "subtle" | "soft" | "ghost"'subtle'"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'primary'Slots
defaultEmits
update:modelValue[value: boolean]Types
type Variant = "solid" | "subtle" | "soft" | "ghost";type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";