Toggle

<Toggle aria-label="Toggle bold">
<Bold class="size-4" />
</Toggle>

Installation

npx bearnie add toggle

import Toggle from "@/components/ui/toggle/Toggle.astro";

Usage

import { Toggle } from "@/components/ui/toggle"

<Toggle>Toggle</Toggle>

Examples

Outline

<div class="flex items-center gap-2">
<Toggle variant="outline" aria-label="Toggle italic">
  <Italic class="size-4" />
</Toggle>
<Toggle variant="outline" aria-label="Toggle bold">
  <Bold class="size-4" />
</Toggle>
</div>

With text

<Toggle aria-label="Toggle italic">
<Italic class="size-4" />
<span>Italic</span>
</Toggle>

Sizes

<div class="flex items-center gap-2">
<Toggle size="sm" aria-label="Toggle bold">
  <Bold class="size-4" />
</Toggle>
<Toggle size="default" aria-label="Toggle bold">
  <Bold class="size-4" />
</Toggle>
<Toggle size="lg" aria-label="Toggle bold">
  <Bold class="size-4" />
</Toggle>
</div>

Pressed

<Toggle pressed aria-label="Toggle underline">
<Underline class="size-4" />
</Toggle>

Disabled

<div class="flex items-center gap-2">
<Toggle disabled aria-label="Toggle bold">
  <Bold class="size-4" />
</Toggle>
<Toggle disabled pressed aria-label="Toggle italic">
  <Italic class="size-4" />
</Toggle>
</div>

Anatomy

Toggle - A pressable button that toggles between on and off states

Props

Prop	Type	Default	Description
variant	”default” \| “outline"	"default”	Visual style variant
size	”sm” \| “default” \| “lg"	"default”	Size of the toggle
pressed	boolean	false	Initial pressed state
disabled	boolean	false	Disables the toggle
class	string	-	Additional CSS classes