Toggle - Bosia Docs

bun x bosia@latest add toggle

A two-state button built on a native <button> with aria-pressed, used for toolbar actions like bold, italic, or view toggles. Distinct from Switch, which is a form control.

Preview

Props

Prop	Type	Default
`pressed`	`boolean`	`false`
`variant`	`"default"` \| `"outline"`	`"default"`
`size`	`"default"` \| `"sm"` \| `"lg"`	`"default"`
`disabled`	`boolean`	`false`
`class`	`string`	`""`

Usage

<script lang="ts">
	import { Toggle } from "$lib/components/ui/toggle";
	let bold = $state(false);
</script>

<Toggle bind:pressed={bold} aria-label="Toggle bold">
	<b>B</b>
</Toggle>

Outline Variant

<Toggle variant="outline" aria-label="Toggle italic">
	<i>I</i>
</Toggle>

With Text

<Toggle aria-label="Toggle italic">
	<i>I</i>
	Italic
</Toggle>

Sizes

<Toggle size="sm">S</Toggle>
<Toggle>M</Toggle>
<Toggle size="lg">L</Toggle>

Disabled

<Toggle disabled>B</Toggle>