72Empezar
HextaUI

Toast

Mensajes breves que se apilan con orden, se expanden al pasar el cursor, se descartan deslizando y convierten un estado de carga en éxito o error en el mismo lugar.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("Event created", {
          description: "Sunday, December 3 at 9:00 AM",
          action: { label: "Undo", onClick: () => toast("Event removed") },
        })
      }
    >
      Show toast
    </Button>
  )
}

Instalación

pnpm dlx shadcn@latest add https://hextaui.com/r/toast.json

Añade el componente, los tokens del tema de HextaUI y los componentes de HextaUI de los que depende.

Uso

Añade <Toaster /> una vez, cerca de la raíz de tu app.

import { Toaster } from "@/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Después llama a toast desde cualquier lugar, incluso fuera de los componentes de React.

import { toast } from "@/components/ui/toast"

toast("Event created", { description: "Sunday at 9:00 AM" })
toast.success("Payment received")
toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Couldn't save" })

Los toasts se apilan en un montón ordenado con el más reciente delante. Pasa el cursor o enfoca el montón para desplegarlo en abanico; todos los temporizadores se pausan mientras lees. Desliza un toast hacia su borde para descartarlo.

Ejemplos

Tipos

Todos los toasts usan la misma superficie calmada; solo el icono lleva el color.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastTypes() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Button variant="outline" size="sm" onClick={() => toast("Draft saved")}>
        Default
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.success("Payment received")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() =>
          toast.error("Couldn't upload photo", {
            description: "The file is larger than 10 MB.",
          })
        }
      >
        Error
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.warning("Storage almost full")}
      >
        Warning
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.info("A new version is available")}
      >
        Info
      </Button>
    </div>
  )
}

Promise

toast.promise muestra un spinner y luego se convierte en su sitio en un toast de éxito o de error, con el icono apareciendo de golpe al cambiar.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

let attempt = 0

function deploy() {
  attempt += 1
  const fails = attempt % 2 === 0
  return new Promise<{ url: string }>((resolve, reject) =>
    setTimeout(
      () =>
        fails
          ? reject(new Error("Build failed"))
          : resolve({ url: "hextaui.com" }),
      1800
    )
  )
}

export function ToastPromise() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.promise(deploy(), {
          loading: "Deploying…",
          success: (data) => ({
            title: "Deployed",
            description: `Live at ${data.url}`,
          }),
          error: (error) => ({
            title: "Deploy failed",
            description: error instanceof Error ? error.message : "Try again.",
          }),
        })
      }
    >
      Deploy (fails every other time)
    </Button>
  )
}

Acción

Pasa action para un botón como Deshacer. Al hacer clic, también descarta el toast.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastAction() {
  const [archived, setArchived] = React.useState(0)

  return (
    <div className="flex flex-col items-center gap-3">
      <Button
        variant="outline"
        onClick={() => {
          setArchived((count) => count + 1)
          toast("Conversation archived", {
            action: {
              label: "Undo",
              onClick: () => setArchived((count) => count - 1),
            },
          })
        }}
      >
        Archive
      </Button>
      <p className="text-sm text-muted-foreground tabular-nums">
        {archived} archived
      </p>
    </div>
  )
}

Actualizar en su sitio

Conserva el id de toast.loading y cámbialo con toast.update, incluido su tipo.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastUpdate() {
  return (
    <Button
      variant="outline"
      onClick={() => {
        const id = toast.loading("Uploading 3 files…")
        setTimeout(() => toast.update(id, { title: "Uploading 2 of 3…" }), 900)
        setTimeout(
          () =>
            toast.update(id, {
              type: "success",
              title: "Upload complete",
              description: "3 files added to Photos.",
            }),
          1800
        )
      }}
    >
      Upload files
    </Button>
  )
}

Sin duplicados

Dale un id a un toast y, al llamarlo de nuevo, actualiza el existente en lugar de apilar una copia.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastDedupe() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.info("You're offline", {
          id: "offline",
          description: "Changes will sync when you reconnect.",
        })
      }
    >
      Go offline (click twice)
    </Button>
  )
}

Teclado

KeyAcción
F6Mueve el foco a los toasts y los despliega en abanico.
TabSe mueve entre las acciones de los toasts y los botones de cierre.
EscDescarta el toast enfocado.

Accesibilidad

  • Los toasts se anuncian de forma educada; toast.error se anuncia de inmediato.
  • Los temporizadores se pausan mientras el puntero o el foco están sobre los toasts, así que nadie tiene que correr contra una cuenta atrás.
  • Los botones de cierre aparecen al pasar el cursor y al enfocar, y siempre están visibles en pantallas táctiles.
  • Con movimiento reducido, los toasts se desvanecen en lugar de deslizarse.

Referencia de la API

Toaster

PropTipoPredeterminado
positionLos teléfonos siempre usan el ancho completo.
"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right""bottom-right"
limitToasts mostrados a la vez; los más antiguos se desvanecen.
number3
timeoutTiempo por defecto en pantalla, en ms.
number5000
AtributoDescripción
data-slot="toaster"El viewport, con data-position.
data-slot="toast"Cada toast, con data-type, data-expanded y data-swiping.

toast()

PropTipoPredeterminado
description
ReactNode–
action
{ label: ReactNode; onClick?: (event) => void }–
idReutilízalo para actualizar en lugar de duplicar.
string–
timeoutPor defecto usa el timeout del Toaster. Los mensajes largos permanecen más tiempo, a unas 250 palabras por minuto.
number–
priority
"low" | "high""low"
onClose
() => void–
onRemove
() => void–

También toast.success, toast.error, toast.warning, toast.info, toast.loading, toast.promise, toast.update y toast.dismiss. Cada uno devuelve o recibe el id del toast.

Relacionado

Usado en bloques

Bloques que se construyen sobre Toast.