# Toggle

> Un botón que queda apretado: negrita, filtro activo, vista de lista.

```tsx
import { Toggle } from "sebs7n-ui/toggle"
```

## Ejemplos

### Un botón que queda apretado

```tsx
import { BoldIcon } from "lucide-react"
import { Toggle } from "sebs7n-ui/toggle"

function Basico() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle defaultPressed>Activos</Toggle>
      <Toggle>Archivados</Toggle>
      <Toggle disabled>Borradores</Toggle>
      <Toggle aria-label="Negrita">
        <BoldIcon />
      </Toggle>
    </div>
  )
}
```

## Props

### Toggle

Hereda las props de `Toggle`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Espacio · Enter | Alterna. |

## Accesibilidad

- Emite `aria-pressed`. Sin texto (solo ícono) necesita `aria-label`.
- El estado se ve por fondo y por `data-pressed`, no solo por color.

## Reglas de uso

- Si la acción navega o abre algo, es un `Button`.
- Varios toggles relacionados van en un `ToggleGroup`.

## Relacionados

[toggle-group](/docs/components/toggle-group.md) · [switch](/docs/components/switch.md) · [button](/docs/components/button.md)