GitHub55X

Toggle

Vue toggle button for pressed and unpressed states, useful for formatting and view options.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/toggle.json

Usage

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

<template>
  <Toggle.Root variant="outline" size="sm">
    <!-- … -->
  </Toggle.Root>
</template>

Composition

      
      Toggle.Root
├── Toggle.Indicator
├── Toggle.Context

Examples

Variants

Use the variant prop to change the visual style of the toggle.

Sizes

Use the size prop to change the size of the toggle.

Controlled

Use the pressed and onPressedChange props to control the toggle's state.

Disabled

Use the disabled prop to disable the toggle.

Indicator

Use the Toggle.Indicator component to render different indicators based on the state of the toggle.

API

See Ark UI Toggle docs for full props and examples.

TocToggle Group