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 />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.
Icon size
iconSize is scaled against the toggle by default. Set it explicitly when the icon has to carry more weight than the control around it.
Disabled
disabled disables interaction with the toggle.
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"'neutral'number | "xs" | "sm" | "md" | "lg" | "xl"'sm' on a small toggle, 'md' otherwiseSlots
defaultEmits
update:modelValue[value: boolean]Types
type Variant = "solid" | "subtle" | "soft" | "ghost";type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";