mielui
Inputs

Toggle

A button that stays pressed until it is pressed again.

Installation

pnpm dlx @mielui/svelte add toggle

Usage

Bind pressed to read or set the state. Put a label or an icon in children, and give an icon-only toggle an aria-label.

<script lang="ts">
    import { TextBoldIcon as Bold } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

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

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

Examples

Text formatting

Three toggles set the style of the sentence below them.

Icon toggle

Text toggle

Sizes

Disabled

Events

onPressedChange runs with the new state on every press, for when you want to react without binding pressed.

API reference

Toggle

Toggles a pressed state.

  • pressed Bindable
    boolean

    Whether it is on. Bindable.

    Default false

  • disabled
    boolean

    Prevents interaction and dims the control.

    Default false

  • size
    "sm" | "md" | "lg"

    Control height.

    Default 'md'

  • variant
    "default" | "outline"

    outline adds a border.

    Default 'default'

  • children
    Snippet<[]>

    Content rendered inside.

  • onPressedChange
    ((pressed: boolean) => void)

    Called with the new state.

  • class
    (string & (ClassValue | null))

    Classes added to the element.