Docs
Toggle
Toggle
A two-state button that can be either on or off.
<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="size-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="size-4" />
</Toggle>
Installation
npx shadcn-svelte@latest add toggle
- Install
bits-ui:
npm install bits-ui
- 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";
</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="size-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="size-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="size-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="size-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 size-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 size-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="size-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="size-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="size-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="size-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="size-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="size-4" />
</Toggle>
On This Page