8.8k

Toggle

PreviousNext

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

Docs API Reference 
<script setup lang="ts">
import { Bold } from 'lucide-vue-next'
import { Toggle } from '@/components/ui/toggle'
</script>

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

Installation

pnpm dlx shadcn-vue@latest add toggle

Usage

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

<template>
  <Toggle>Toggle</Toggle>
</template>

Examples

Default

<script setup lang="ts">
import { Bold } from 'lucide-vue-next'
import { Toggle } from '@/components/ui/toggle'
</script>

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

Outline

<script setup lang="ts">
import { Bold } from 'lucide-vue-next'

import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle variant="outline" aria-label="Toggle bold">
    <Bold />
  </Toggle>
</template>

With Text

<script setup lang="ts">
import { Italic } from 'lucide-vue-next'

import { Toggle } from '@/components/ui/toggle'
</script>

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

Small

<script setup lang="ts">
import { Italic } from 'lucide-vue-next'

import { Toggle } from '@/components/ui/toggle'
</script>

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

Large

<script setup lang="ts">
import { Italic } from 'lucide-vue-next'

import { Toggle } from '@/components/ui/toggle'
</script>

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

Disabled

<script setup lang="ts">
import { Underline } from 'lucide-vue-next'
import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle aria-label="Toggle underline" disabled>
    <Underline class="h-4 w-4" />
  </Toggle>
</template>
ToastToggle Group