Toggle - shadcn-svelte

shadcn-svelte for Svelte 5 has been released! - Visit the preview docs

Docs

Toggle

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

Component Source Primitive API Reference

	<script lang="ts">
  import FontBold from "svelte-radix/FontBold.svelte";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle aria-label="toggle bold">
  <FontBold class="h-4 w-4" />
</Toggle>

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

Installation

	npx  shadcn-svelte@latest add toggle

Usage

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

Examples

Default

	<script lang="ts">
  import FontBold from "svelte-radix/FontBold.svelte";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle aria-label="toggle bold">
  <FontBold class="h-4 w-4" />
</Toggle>

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

Outline

	<script lang="ts">
  import FontItalic from "svelte-radix/FontItalic.svelte";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle variant="outline" aria-label="Toggle italic">
  <FontItalic class="h-4 w-4" />
</Toggle>

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

With Text

	<script lang="ts">
  import FontItalic from "svelte-radix/FontItalic.svelte";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle aria-label="Toggle italic">
  <FontItalic class="mr-2 h-4 w-4" />
  Italic
</Toggle>

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

Small

	<script lang="ts">
  import FontItalic from "svelte-radix/FontItalic.svelte";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle size="sm" aria-label="Toggle italic">
  <FontItalic class="h-4 w-4" />
</Toggle>

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

Large

	<script lang="ts">
  import FontItalic from "svelte-radix/FontItalic.svelte";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle size="lg" aria-label="Toggle italic">
  <FontItalic class="h-4 w-4" />
</Toggle>

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

Disabled

	<script lang="ts">
  import Underline from "svelte-radix/Underline.svelte";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle aria-label="Toggle underline" disabled>
  <Underline class="h-4 w-4" />
</Toggle>

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

Textarea Toggle Group

On This Page