Toggle

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

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/toggle.json

Usage

Use toggle for a single on/off control, such as a formatting button in a toolbar. For a set of related, mutually exclusive or multi-select toggles, use ToggleGroup instead.

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle";
</script>

<template>
  <Toggle aria-label="Toggle italic">
    <em>Italic</em>
  </Toggle>
</template>

Supports variant (default | outline) and size (default | sm | lg) props. Built on reka-ui's Toggle primitive.