Toggle

<Toggle aria-label="Toggle TextBoldIcon">
  <HugeIcon icon={TextBoldIcon} class="size-4" />
</Toggle>

Installation

npx bearnie add toggle

Usage

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

<Toggle>Toggle</Toggle>

Examples

Outline

<div class="flex items-center gap-2">
  <Toggle variant="outline" aria-label="Toggle TextItalicIcon">
    <HugeIcon icon={TextItalicIcon} class="size-4" />
  </Toggle>
  <Toggle variant="outline" aria-label="Toggle TextBoldIcon">
    <HugeIcon icon={TextBoldIcon} class="size-4" />
  </Toggle>
</div>

With text

<Toggle aria-label="Toggle TextItalicIcon">
  <HugeIcon icon={TextItalicIcon} class="size-4" />
  <span>Italic</span>
</Toggle>

Sizes

<div class="flex items-center gap-2">
  <Toggle size="sm" aria-label="Toggle TextBoldIcon">
    <HugeIcon icon={TextBoldIcon} class="size-4" />
  </Toggle>
  <Toggle size="default" aria-label="Toggle TextBoldIcon">
    <HugeIcon icon={TextBoldIcon} class="size-4" />
  </Toggle>
  <Toggle size="lg" aria-label="Toggle TextBoldIcon">
    <HugeIcon icon={TextBoldIcon} class="size-4" />
  </Toggle>
</div>

Pressed

<Toggle pressed aria-label="Toggle TextUnderlineIcon">
  <HugeIcon icon={TextUnderlineIcon} class="size-4" />
</Toggle>

Disabled

<div class="flex items-center gap-2">
  <Toggle disabled aria-label="Toggle TextBoldIcon">
    <HugeIcon icon={TextBoldIcon} class="size-4" />
  </Toggle>
  <Toggle disabled pressed aria-label="Toggle TextItalicIcon">
    <HugeIcon icon={TextItalicIcon} 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