Components

Toggle

A two-state button that can be on or off.

A single button that toggles between pressed and unpressed states. Use it for toolbar actions, view toggles, or any binary UI control that doesn't need a label (see Switch for a labeled toggle field).

Anatomy

#default — the button content, receives { pressed, state } scoped props

Usage

The quick brown fox jumps over the lazy dog.

Examples

<template>
  <div role="toolbar" aria-label="Text formatting">
    <Toggle v-model="bold" aria-label="Bold">
      <template #default="{ pressed }">
        <span :data-active="pressed">B</span>
      </template>
    </Toggle>

    <Toggle v-model="italic" aria-label="Italic">
      <template #default="{ pressed }">
        <span :data-active="pressed">I</span>
      </template>
    </Toggle>
  </div>
</template>

Using the `state` prop

state is "on" or "off" — useful for data-attribute-driven styling.

<template>
  <Toggle v-model="active" aria-label="Mute">
    <template #default="{ state }">
      <span :data-state="state">🔇</span>
    </template>
  </Toggle>
</template>

API Reference

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Whether the toggle is pressed.
`disabled`	`boolean`	`false`	Disables the toggle.
`value`	`string`	—	Value used when the toggle is part of a group.
`ariaLabel`	`string`	—	Accessible label for icon-only toggles.
`as`	`string`	`"button"`	Root element tag.
`ui`	`ToggleUi`	—	CSS class overrides.

Slots

Slot	Scoped props	Description
`default`	`{ pressed, state }`	Button content. `state` is `"on"` or `"off"`.

UI Options

Key	Description
`root`	The button element.

Tabs

A set of layered sections of content, one visible at a time.

Tooltip

A floating label that appears when the user hovers or focuses an element.