Toggle

Botón con estado on/off. Ideal para filtros, toggles de vista o modos.

---

Import

import { Toggle } from '@imansi/ui';

---

Uso básico

<Toggle>B</Toggle>

---

Con ícono

import { Bold, Italic, Underline } from 'lucide-react';

<Toggle aria-label="Negrita">
  <Bold className="h-4 w-4" />
</Toggle>

---

Variantes

<Toggle variant="default">Default</Toggle>
<Toggle variant="outline">Outline</Toggle>

---

Tamaños

<Toggle size="sm">Pequeño</Toggle>
<Toggle size="md">Mediano</Toggle>
<Toggle size="lg">Grande</Toggle>

---

Controlado

const [activo, setActivo] = useState(false);

<Toggle pressed={activo} onPressedChange={setActivo}>
  <Bold className="h-4 w-4" />
</Toggle>

---

Props

Prop	Tipo	Default	Descripción
variant	'default' | 'outline'	'default'	Estilo visual
size	'sm' | 'md' | 'lg'	'md'	Tamaño
pressed	boolean	—	Estado controlado
defaultPressed	boolean	false	Estado inicial
onPressedChange	(pressed: boolean) => void	—	Callback
disabled	boolean	false	Deshabilita

---

Accesibilidad

• aria-pressed se actualiza automáticamente
• Navegable con Tab, toggle con Space
• aria-label obligatorio si solo tiene ícono