Toast

Notificaciones toast con sonner

Notificaciones toast basadas en la biblioteca sonner. Renderiza Toaster una vez (p. ej. en tu layout) y llama a toast() desde cualquier sitio.

tsx

import { Toaster, toast } from "@/components/ui/sonner";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() =>
          toast("Ajustes guardados", {
            description: "Tus preferencias se han actualizado.",
          })
        }
      >
        Mostrar toast
      </Button>
    </>
  );
}

Instalación

bash

liminal add sonner

Uso

tsx

import { Toaster, toast } from "@/components/ui/sonner";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() =>
          toast("Ajustes guardados", {
            description: "Tus preferencias se han actualizado.",
          })
        }
      >
        Mostrar toast
      </Button>
    </>
  );
}

Ejemplos

Mensaje básico

tsx

toast("¡Hola!");

Con descripción

tsx

toast("Actualización lista", {
  description: "Reinicia la app para aplicar los cambios.",
});

Variantes

Usa success, error, warning o info para estilos semánticos.

tsx

toast.success("¡Guardado!");
toast.error("Algo falló");

API

Prop	Type	Default	Description
toast(message, options)	function	-	Muestra un toast. message: string. options: description, duration, variant, etc.
Toaster	component	-	Renderiza una vez en tu app (p. ej. layout). Renderiza toasts en un portal.
options.description	string	-	Texto secundario debajo del mensaje.
options.duration	number	4000	Duración en ms antes de que se cierre el toast.