Toggle

A two-state button that can be switched on or off. Use it for binary controls such as text-formatting buttons in a toolbar or persistent view options. The pressed state is bindable, and any extra props (e.g. disabled, onPressedChange, aria-label) forward to the underlying primitive root.

On and off

One control holding its own state. The on state wears bg-selected — the same treatment a checked box, a chosen tab and a primary button wear, so a choice looks like a choice wherever it turns up.

Icon only

A lone glyph carries no accessible name, so it needs an aria-label. Everything else about the control is unchanged.

Formatting toolbar

Independent toggles side by side, each owning its own state. Reach for ToggleGroup instead when the choices are mutually exclusive or belong to one setting.

<div class="flex items-center gap-1">
	<Toggle aria-label="Bold">
		<Bold class="size-4" />
	</Toggle>
	<Toggle aria-label="Italic">
		<Italic class="size-4" />
	</Toggle>
	<Toggle aria-label="Underline">
		<Underline class="size-4" />
	</Toggle>
</div>

API

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Toggle content (text, icon, or both).
`pressed` bindable	`boolean`	`false`	Whether the toggle is in the pressed (on) state. Bindable.
`class`	`string`		Additional Tailwind classes merged onto the toggle root.
`disabled`	`boolean`		Disables interaction and dims the toggle (forwarded via `...rest`).