Toggle

A two-state button that can be either on or off.

Import

import { Toggle } from '@akitectio/aki-ui'

Basic Usage

<Toggle aria-label="Toggle italic">
  <span className="text-sm font-medium">B</span>
</Toggle>

Controlled

Bold is off
const [pressed, setPressed] = useState(false);

<div className="flex items-center gap-2">
  <Toggle 
    pressed={pressed}
    onPressedChange={setPressed}
    aria-label="Toggle bold"
  >
    <span className="text-sm font-medium">B</span>
  </Toggle>
  <span className="text-sm text-gray-600">
    {pressed ? 'Bold is on' : 'Bold is off'}
  </span>
</div>

Disabled

<Toggle disabled aria-label="Toggle italic">
  <span className="text-sm font-medium">I</span>
</Toggle>

With Text

<Toggle aria-label="Toggle notifications">
  <span className="text-sm">Enable notifications</span>
</Toggle>

Size Variants

<div className="flex items-center gap-4">
  <Toggle size="sm" aria-label="Toggle small">
    <span className="text-xs">S</span>
  </Toggle>
  <Toggle size="md" aria-label="Toggle medium">
    <span className="text-sm">M</span>
  </Toggle>
  <Toggle size="lg" aria-label="Toggle large">
    <span className="text-base">L</span>
  </Toggle>
</div>