Toggle

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

Examples

Default

<Toggle aria-label="Toggle bold">
  <Bold class="h-4 w-4" />
</Toggle>

Outline

<Toggle variant="outline" aria-label="Toggle bold">
  <Bold class="h-4 w-4" />
</Toggle>

With Text

<Toggle aria-label="Toggle italic">
  <Bold class="mr-2 h-4 w-4" />
  Bold
</Toggle>

Props

Toggle

Prop	Type	Default	Description
pressed	boolean	-	The controlled pressed state of the toggle.
defaultPressed	boolean	false	The default pressed state of the toggle.
disabled	boolean	false	Whether the toggle is disabled.

Slots

Toggle

Slot	Description
default	The content of the toggle.