Toast

Notificaciones temporales con auto-dismiss y barra de progreso. Requiere ToastProvider en el layout.

pnpm dlx nuvo-ui add toast

Demo interactiva

Setup — layout.tsx

// app/layout.tsx
import { ToastProvider } from "@nuvo-ui/ui"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ToastProvider>
          {children}
        </ToastProvider>
      </body>
    </html>
  )
}

Uso en componentes

"use client"
import { useToast } from "@nuvo-ui/ui"

function MyComponent() {
  const { toast, dismiss } = useToast()

  function handleSave() {
    const id = toast({
      title: "Guardado",
      description: "Los cambios se aplicaron.",
      variant: "success",
      duration: 4000, // ms, 0 = sin auto-dismiss
    })
    // dismiss(id) // cerrar manualmente
  }
}

Props de toast()

Prop	Tipo	Default	Descripción
title	string	—	Título del toast
description	string	—	Texto descriptivo
variant	"default" \| "success" \| "warning" \| "error"	"default"	Estilo visual
duration	number	4000	ms hasta auto-dismiss; 0 = permanente