Sivir UI
Studio 64

Toggle

A button with an on/off pressed state. Comes in several sizes.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add toggle

Usage

Import Toggle and bind its pressed state:

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

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

Examples

Toggle in different sizes and variants.

Icon toggle

Text toggle

Sizes

Disabled

Anatomy

Toggle - Toggles a pressed state.