Superposiciones

Toaster (Sonner)

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

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

Ejemplos

Confirmar que algo salió bien

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

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.

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

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Toaster

Sin props propias: pasa todo al primitivo.

Teclado

⌥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 AlertDialog