72Los geht’s
HextaUI

Toast

Kurze Nachrichten, die sich sauber stapeln, bei Hover aufklappen, weggewischt werden können und einen Ladezustand an Ort und Stelle in Erfolg oder Fehler verwandeln.

"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>
  )
}

Installation

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

Fügt die Komponente, die HextaUI-Theme-Tokens und alle HextaUI-Komponenten hinzu, von denen sie abhängt.

Verwendung

Füge <Toaster /> einmal nahe dem Root deiner App hinzu.

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

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

Rufe dann toast von überall auf, auch außerhalb von React-Komponenten.

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" })

Toasts stapeln sich zu einem ordentlichen Haufen, der neueste vorn. Hovere oder fokussiere den Stapel, um ihn aufzufächern; jeder Timer pausiert, während du liest. Wische einen Toast zu seinem Rand, um ihn zu schließen.

Beispiele

Typen

Jeder Toast nutzt dieselbe ruhige Fläche; nur das Icon trägt die Farbe.

"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 zeigt einen Spinner und wandelt sich dann an Ort und Stelle in einen Erfolgs- oder Fehler-Toast, wobei das Icon beim Wechsel aufploppt.

"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>
  )
}

Aktion

Übergib action für einen Button wie Undo. Ein Klick darauf schließt auch den 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>
  )
}

An Ort und Stelle aktualisieren

Behalte die id von toast.loading und ändere ihn mit toast.update, auch seinen Typ.

"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>
  )
}

Keine Duplikate

Gib einem Toast eine id, und ein erneuter Aufruf aktualisiert den bestehenden, statt eine Kopie zu stapeln.

"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>
  )
}

Tastatur

TasteAktion
F6Setzt den Fokus in die Toasts und fächert sie auf.
TabWechselt zwischen Toast-Aktionen und Schließen-Buttons.
EscSchließt den fokussierten Toast.

Barrierefreiheit

  • Toasts werden höflich angesagt; toast.error wird sofort angesagt.
  • Timer pausieren, solange Zeiger oder Fokus auf den Toasts liegen, damit niemand einem Countdown hinterherrennen muss.
  • Schließen-Buttons erscheinen bei Hover und Fokus und sind auf Touchscreens immer sichtbar.
  • Bei reduzierter Bewegung blenden Toasts ein, statt zu gleiten.

API-Referenz

Toaster

PropTypStandard
positionSmartphones nutzen immer die volle Breite.
"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right""bottom-right"
limitGleichzeitig angezeigte Toasts; ältere blenden aus.
number3
timeoutStandarddauer auf dem Bildschirm, in ms.
number5000
AttributBeschreibung
data-slot="toaster"Der Viewport, mit data-position.
data-slot="toast"Jeder Toast, mit data-type, data-expanded und data-swiping.

toast()

PropTypStandard
description
ReactNode–
action
{ label: ReactNode; onClick?: (event) => void }–
idWiederverwenden, um zu aktualisieren statt zu duplizieren.
string–
timeoutStandard ist das Timeout des Toasters. Lange Nachrichten bleiben länger, etwa 250 Wörter pro Minute.
number–
priority
"low" | "high""low"
onClose
() => void–
onRemove
() => void–

Außerdem toast.success, toast.error, toast.warning, toast.info, toast.loading, toast.promise, toast.update und toast.dismiss. Jede gibt die id des Toasts zurück oder nimmt sie entgegen.

Verwandt

In Blocks verwendet

Blocks, die auf Toast aufbauen.