Toggle

Each click flips pressed and sets aria-pressed on the button. Bind the state or listen with onPressedChange.

<script lang="ts">
    import Bold from '@lucide/svelte/icons/bold';
    import { Toggle } from '@sivir-ui/svelte/components/toggle';

    let bold = $state(true);
</script>

<Toggle bind:pressed={bold} aria-label="Bold">
    <Bold size={14} />
</Toggle>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add toggle

Usage

Bind pressed (defaults to false), or pass onPressedChange. Icon-only toggles need an aria-label. variant="outline" adds a border.

import { Toggle } from '@sivir-ui/svelte/components/toggle';
import Bold from '@lucide/svelte/icons/bold';

let bold = $state(false);

<Toggle bind:pressed={bold} aria-label="Bold">
  <Bold size={14} />
</Toggle>

Examples

Icon toggle

<script lang="ts">
    import Bell from '@lucide/svelte/icons/bell';
    import { Toggle } from '@sivir-ui/svelte/components/toggle';

    let notifications = $state(true);
</script>

<Toggle bind:pressed={notifications} aria-label="Notifications">
    <Bell size={14} />
</Toggle>

Text toggle

<script lang="ts">
    import { Toggle } from '@sivir-ui/svelte/components/toggle';
</script>

<Toggle>Word wrap</Toggle>

Sizes

<script lang="ts">
    import Bold from '@lucide/svelte/icons/bold';
    import { Toggle } from '@sivir-ui/svelte/components/toggle';
</script>

<div class="flex gap-2">
    <Toggle size="sm" aria-label="Bold">
        <Bold size={12} />
    </Toggle>
    <Toggle aria-label="Bold">
        <Bold size={14} />
    </Toggle>
    <Toggle size="lg" aria-label="Bold">
        <Bold size={16} />
    </Toggle>
</div>

Disabled

<script lang="ts">
    import Edit from '@lucide/svelte/icons/edit';
    import { Toggle } from '@sivir-ui/svelte/components/toggle';
</script>

<div class="flex items-center gap-2">
    <Toggle aria-label="Edit">
        <Edit size={14} />
    </Toggle>
    <Toggle disabled aria-label="More options (upgrade required)">
        <Edit size={14} />
    </Toggle>
</div>

Anatomy

Toggle - Toggles a pressed state.