Docs
Toggle

Toggle

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

Component Source Primitive API Reference
Loading...

Installation

	npx shadcn-svelte@latest add toggle

Usage

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

<Toggle>Toggle</Toggle>

Examples

Default

Loading...
	<script lang="ts">
  import { FontBold } from "radix-icons-svelte";
  import { Toggle } from "$lib/components/ui/toggle";
</script>

<Toggle aria-label="toggle bold">
  <FontBold class="h-4 w-4" />
</Toggle>

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

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

Outline

Loading...
	<script lang="ts">
  import { FontItalic } from "radix-icons-svelte";
  import { Toggle } from "$lib/components/ui/toggle";
</script>

<Toggle variant="outline" aria-label="Toggle italic">
  <FontItalic class="h-4 w-4" />
</Toggle>

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

<Toggle variant="outline" aria-label="Toggle italic">
  <Italic class="h-4 w-4" />
</Toggle>

With Text

Loading...
	<script lang="ts">
  import { FontItalic } from "radix-icons-svelte";
  import { Toggle } from "$lib/components/ui/toggle";
</script>

<Toggle aria-label="Toggle italic">
  <FontItalic class="mr-2 h-4 w-4" />
  Italic
</Toggle>

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

<Toggle aria-label="Toggle italic">
  <Italic class="mr-2 h-4 w-4" />
  Italic
</Toggle>

Small

Loading...
	<script lang="ts">
  import { FontItalic } from "radix-icons-svelte";
  import { Toggle } from "$lib/components/ui/toggle";
</script>

<Toggle size="sm" aria-label="Toggle italic">
  <FontItalic class="h-4 w-4" />
</Toggle>

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

<Toggle size="sm" aria-label="Toggle italic">
  <Italic class="h-4 w-4" />
</Toggle>

Large

Loading...
	<script lang="ts">
  import { FontItalic } from "radix-icons-svelte";
  import { Toggle } from "$lib/components/ui/toggle";
</script>

<Toggle size="lg" aria-label="Toggle italic">
  <FontItalic class="h-4 w-4" />
</Toggle>

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

<Toggle size="lg" aria-label="Toggle italic">
  <Italic class="h-4 w-4" />
</Toggle>

Disabled

Loading...
	<script lang="ts">
  import { Underline } from "radix-icons-svelte";
  import { Toggle } from "$lib/components/ui/toggle";
</script>

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

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

<Toggle aria-label="Toggle underline" disabled>
  <Underline class="h-4 w-4" />
</Toggle>
Textarea Tooltip