Toggle

Preview

Installation

pnpm add fancy-ui-svelte

import { Toggle } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { Toggle } from 'fancy-ui-svelte';
</script>

<Toggle />

Examples

Basic Usage

A single icon-only toggle with a bound pressed state.

svelte

<script lang="ts">
	import { Toggle } from "$lib/fancy-ui/toggle";

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

<Toggle bind:pressed={muted} label={muted ? "Unmute" : "Mute"}>
	{#if muted}
		<svg
			class="size-4"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			stroke-linecap="round"
			stroke-linejoin="round"
			aria-hidden="true"
		>
			<path d="M11 5 6 9H2v6h4l5 4V5Z" />
			<line x1="23" y1="9" x2="17" y2="15" />
			<line x1="17" y1="9" x2="23" y2="15" />
		</svg>
	{:else}
		<svg
			class="size-4"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			stroke-linecap="round"
			stroke-linejoin="round"
			aria-hidden="true"
		>
			<path d="M11 5 6 9H2v6h4l5 4V5Z" />
			<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
			<path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
		</svg>
	{/if}
</Toggle>

Sizes

The three available sizes, sm/md/lg.

svelte

<script lang="ts">
	import { Toggle, type ToggleSize } from "$lib/fancy-ui/toggle";

	const sizes: ToggleSize[] = ["sm", "md", "lg"];
</script>

<div class="flex flex-wrap items-center gap-3">
	{#each sizes as size (size)}
		<Toggle {size} pressed label={`Size ${size}`}>
			<strong>B</strong>
		</Toggle>
	{/each}
</div>

Variants

Ghost vs. outline, resting and pressed.

svelte

<script lang="ts">
	import { Toggle, type ToggleVariant } from "$lib/fancy-ui/toggle";

	const variants: ToggleVariant[] = ["ghost", "outline"];
</script>

<div class="flex flex-wrap items-center gap-6">
	{#each variants as variant (variant)}
		<div class="flex items-center gap-2">
			<Toggle {variant} label={`${variant}, resting`}>
				<strong>B</strong>
			</Toggle>
			<Toggle {variant} pressed label={`${variant}, pressed`}>
				<strong>B</strong>
			</Toggle>
		</div>
	{/each}
</div>

Text Formatting

A bold/italic/underline row with a live preview.

svelte

<script lang="ts">
	import { Toggle } from "$lib/fancy-ui/toggle";

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

<div class="flex flex-col gap-3">
	<div class="flex gap-2">
		<Toggle bind:pressed={bold} label="Bold">
			<strong>B</strong>
		</Toggle>
		<Toggle bind:pressed={italic} label="Italic">
			<em>I</em>
		</Toggle>
		<Toggle bind:pressed={underline} label="Underline">
			<span class="underline">U</span>
		</Toggle>
	</div>

	<p class="text-sm" class:font-bold={bold} class:italic class:underline>
		Toggle the marks above to preview how this sentence would look.
	</p>
</div>

Props

Prop	Type	Default	Description
`pressed`	boolean	`false`	Whether the toggle is currently pressed (active); bindable
`onPressedChange`	(pressed: boolean) => void	-	Called with the new pressed state whenever the toggle is activated
`disabled`	boolean	`false`	Disables the toggle; blocks both the state change and the callback
`size`	"sm" \| "md" \| "lg"	`"md"`	Visual size of the control
`variant`	"ghost" \| "outline"	`"ghost"`	"ghost" has no resting border, "outline" keeps one at rest
`label`	string	-	Accessible name — required when children is icon-only
`class`	string	-	Additional CSS classes
`ref`	HTMLButtonElement \| null	`null`	Bindable element reference