Toggle

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

<script lang="ts">
  import BookmarkSimpleIcon from "phosphor-svelte/lib/BookmarkSimpleIcon";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle
  aria-label="Toggle bookmark"
  size="sm"
  variant="outline"
  class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
>
  <BookmarkSimpleIcon />
  Bookmark
</Toggle>

Installation

pnpm dlx jsrepo@latest add toggle

npx jsrepo@latest add toggle

yarn dlx jsrepo@latest add toggle

bunx jsrepo@latest add toggle

Install bits-ui:

pnpm add bits-ui -D

npm install bits-ui -D

yarn add bits-ui -D

bun add bits-ui -D

Copy and paste the following code into your project.

import Root from './toggle.svelte';
export {
  toggleVariants,
  type ToggleSize,
  type ToggleVariant,
  type ToggleVariants
} from './toggle.svelte';

export {
  Root,
  //
  Root as Toggle
};

Usage

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

<Toggle>Toggle</Toggle>

Examples

Default

<script lang="ts">
  import BookmarkSimpleIcon from "phosphor-svelte/lib/BookmarkSimpleIcon";
  import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
 
<Toggle
  aria-label="Toggle bookmark"
  size="sm"
  variant="outline"
  class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
>
  <BookmarkSimpleIcon />
  Bookmark
</Toggle>

Outline

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

With Text

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

Small

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

Large

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

Disabled

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