Studio
2

Toggle

Installation

pnpm dlx @mielui/svelte add toggle

Usage

Keyboard activation and pointer activation update pressed through the same control. A consumer event handler can prevent the default action before the pressed state changes.

Import Toggle and bind its pressed state:

import { Toggle } from '$lib/mielui/components/toggle';

<Toggle bind:pressed={bold}>
  <Bold size={14} />
</Toggle>

Examples

Icon toggle

Text toggle

Sizes

Disabled

API reference

Toggle

Toggles a pressed state.

Prop Type Default
pressed Bindable boolean | undefined false
disabled boolean | undefined false
size "sm" | "md" | "lg" | undefined 'md'
variant "outline" | "default" | "outlined" | undefined 'default'
children Snippet<[]> | undefined —
onPressedChange ((pressed: boolean) => void) | undefined —
class (string & (ClassValue | null)) | undefined —