# Toaster (Sonner)

> Los avisos de la esquina. El `Toaster` va una vez en el layout; los mensajes salen de `toast()`.

```tsx
import { Toaster } from "sebs7n-ui/sonner"
```

## Ejemplos

### Confirmar que algo salió bien

El `<Toaster />` va una sola vez, en el layout raíz.

```tsx
import { Button } from "sebs7n-ui/button"
import { toast } from "sonner"

function Basico() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button onClick={() => toast("Factura 0014 emitida")} variant="outline">
        Neutro
      </Button>
      <Button onClick={() => toast.success("Se envió el email al cliente")} variant="outline">
        Éxito
      </Button>
      <Button onClick={() => toast.error("AFIP rechazó el comprobante")} variant="outline">
        Error
      </Button>
    </div>
  )
}
```

### Con acción y con promesa

Si el toast lleva acción, tiene que durar lo suficiente para leerlo y apretarla.

```tsx
import { Button } from "sebs7n-ui/button"
import { toast } from "sonner"

function AccionYPromesa() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button
        onClick={() =>
          toast("Factura archivada", {
            action: { label: "Deshacer", onClick: () => toast.success("Restaurada") },
            duration: 8000,
          })
        }
        variant="outline"
      >
        Con acción
      </Button>
      <Button
        onClick={() =>
          toast.promise(new Promise((resolve) => setTimeout(resolve, 1600)), {
            loading: "Enviando a AFIP…",
            success: "Aprobada. CAE 7501…",
            error: "No respondió el servicio",
          })
        }
        variant="outline"
      >
        Con promesa
      </Button>
    </div>
  )
}
```

## Props

### Toaster

Sin props propias: pasa todo al primitivo.

## Teclado

| Tecla | Qué hace |
|---|---|
| ⌥T / F6 | Enfoca la región de toasts (lo trae Sonner). |
| Tab | Recorre las acciones del toast enfocado. |
| Escape | Sale de la región. |

## Accesibilidad

- Sonner emite una región `aria-live` con `role="status"`: el mensaje se anuncia sin robar el foco.
- El `Toaster` de sebs7n-ui toma el tema de `next-themes` y las superficies del paquete (`bg-background-100`, `shadow-menu`).
- Un toast con acción tiene que durar lo suficiente para leerlo y apretarla, o no llevarla.

## Reglas de uso

- **Un toast es para confirmar, no para informar de un error que hay que resolver.** Un error de formulario va al lado del campo.
- `<Toaster />` una sola vez, en el layout raíz, dentro del `ThemeProvider`.
- `toast.promise()` para una operación con espera: muestra cargando, éxito y error en el mismo toast.
- Si el usuario puede perder trabajo, es un `AlertDialog`, no un toast.

## Relacionados

[alert](/docs/components/alert.md) · [alert-dialog](/docs/components/alert-dialog.md)