Toggle

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

<script lang="ts">
  import BoldIcon from "@lucide/svelte/icons/bold";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle aria-label="toggle bold">
  <BoldIcon class="size-4" />
</Toggle>

Installation

pnpm dlx shadcn-svelte@latest add toggle

npx shadcn-svelte@latest add toggle

bun x shadcn-svelte@latest add toggle

npx shadcn-svelte@latest add toggle

Install bits-ui:

pnpm i bits-ui -D

npm i bits-ui -D

bun install bits-ui -D

yarn install bits-ui -D

Copy and paste the component source files linked at the top of this page into your project.

Usage

<script lang="ts">
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle>Toggle</Toggle>

Examples

Default

<script lang="ts">
  import BoldIcon from "@lucide/svelte/icons/bold";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle aria-label="toggle bold">
  <BoldIcon class="size-4" />
</Toggle>

Outline

<script lang="ts">
  import ItalicIcon from "@lucide/svelte/icons/italic";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle variant="outline" aria-label="Toggle italic">
  <ItalicIcon class="size-4" />
</Toggle>

With Text

<script lang="ts">
  import ItalicIcon from "@lucide/svelte/icons/italic";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle aria-label="Toggle italic">
  <ItalicIcon class="mr-2 size-4" />
  Italic
</Toggle>

Small

<script lang="ts">
  import ItalicIcon from "@lucide/svelte/icons/italic";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle size="sm" aria-label="Toggle italic">
  <ItalicIcon class="size-4" />
</Toggle>

Large

<script lang="ts">
  import ItalicIcon from "@lucide/svelte/icons/italic";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle size="lg" aria-label="Toggle italic">
  <ItalicIcon class="size-4" />
</Toggle>

Disabled

<script lang="ts">
  import UnderlineIcon from "@lucide/svelte/icons/underline";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle aria-label="Toggle underline" disabled>
  <UnderlineIcon class="size-4" />
</Toggle>

Toggle Group Tooltip