Toast

"use client"

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

// <Toaster /> is mounted once in the root layout; `toast.add` reaches it from anywhere on the client.
export default function ToastDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Button
        variant="outline"
        onClick={() =>
          toast.add({
            title: "Report scheduled",
            description: "Weekly revenue goes to 4 people every Monday at 08:00.",
            type: "success",
          })
        }
      >
        Schedule report
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.add({
            title: "Export failed",
            description: "The revenue export timed out after 30 seconds.",
            type: "error",
            actionProps: {
              children: "Retry",
              onClick: () => toast.add({ title: "Export queued again", type: "info" }),
            },
          })
        }
      >
        Export revenue
      </Button>
    </div>
  )
}

"use client"

import { SendIcon } from "lucide-react"

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

// A title and nothing more: the row already says which invoice, so the toast
// only has to confirm that the reminder went. It leaves on its own.
export default function ToastSuccess() {
  return (
    <div className="flex w-full max-w-sm items-center justify-between gap-4 rounded-lg bg-card p-3 ring-1 ring-border">
      <div className="flex min-w-0 flex-col">
        <span className="truncate text-sm font-medium">Fathom Media</span>
        <span className="text-xs text-muted-foreground">
          <span className="font-mono">INV-100018</span> · <span className="tabular-nums">$776.85</span> · due 14 Sep
        </span>
      </div>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.add({ title: "Reminder sent to Maja Nyman", type: "success" })}
      >
        <SendIcon data-icon="inline-start" aria-hidden="true" />
        Send reminder
      </Button>
    </div>
  )
}

"use client"

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

// A failure the reader has to know about now: `priority: "high"` has the
// stack read it out at once through role="alert", where an ordinary toast
// waits its turn in the polite region. It still takes no focus.
export default function ToastError() {
  return (
    <div className="flex w-full max-w-sm items-center justify-between gap-4 rounded-lg bg-card p-3 ring-1 ring-border">
      <div className="flex min-w-0 flex-col">
        <span className="truncate text-sm font-medium">Alder Health</span>
        <span className="text-xs text-muted-foreground">
          <span className="font-mono">INV-100010</span> · <span className="tabular-nums">$1,200.00</span> · overdue
        </span>
      </div>
      <Button
        variant="outline"
        size="sm"
        onClick={() =>
          toast.add({
            title: "Card declined",
            description: (
              <>
                Nothing was charged, and <span className="font-mono">INV-100010</span> stays overdue.
              </>
            ),
            type: "error",
            priority: "high",
          })
        }
      >
        Retry the charge
      </Button>
    </div>
  )
}

"use client"

import * as React from "react"
import { ArchiveIcon } from "lucide-react"

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

const ORDERS = [
  { number: "ORD-100014", customer: "Harborview Robotics", total: "$422.98" },
  { number: "ORD-100095", customer: "Wavelength Health", total: "$183.99" },
  { number: "ORD-100013", customer: "Foxglove Health", total: "$1,285.00" },
]

// Archiving happens at once and the toast offers the way back, which beats
// asking first. Undo puts the order back where it was and closes the toast.
// The pressed button leaves with its row, so the focus moves to the next one.
export default function ToastUndo() {
  const [archived, setArchived] = React.useState<string[]>([])
  const [restored, setRestored] = React.useState("")
  const list = React.useRef<HTMLUListElement>(null)
  const focusNext = React.useRef<string | null>(null)

  const shown = ORDERS.filter((order) => !archived.includes(order.number))

  React.useEffect(() => {
    if (focusNext.current === null) return
    const target = focusNext.current
    focusNext.current = null
    const button = target ? list.current?.querySelector<HTMLElement>(`[data-order="${target}"]`) : null
    ;(button ?? list.current)?.focus()
  }, [archived])

  function archive(number: string) {
    const at = shown.findIndex((order) => order.number === number)
    focusNext.current = (shown[at + 1] ?? shown[at - 1])?.number ?? ""
    setArchived((current) => [...current, number])
    setRestored("")
    const id = toast.add({
      title: (
        <>
          <span className="font-mono">{number}</span> archived
        </>
      ),
      actionProps: {
        children: "Undo",
        onClick: () => {
          setArchived((current) => current.filter((entry) => entry !== number))
          setRestored(`${number} is back in Fulfilled.`)
          toast.close(id)
        },
      },
    })
  }

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <h3 id="toast-undo-title" className="text-sm font-semibold">
        Fulfilled · <span className="tabular-nums">{shown.length}</span>
      </h3>
      <ul
        ref={list}
        tabIndex={-1}
        aria-labelledby="toast-undo-title"
        className="flex min-h-10 flex-col divide-y divide-border rounded-lg ring-1 ring-border outline-none"
      >
        {shown.map((order) => (
          <li key={order.number} className="flex items-center gap-3 px-3 py-1.5 text-sm">
            <span className="flex min-w-0 flex-col">
              <span className="truncate">{order.customer}</span>
              <span className="font-mono text-xs text-muted-foreground">{order.number}</span>
            </span>
            <span className="ms-auto tabular-nums">{order.total}</span>
            <Button
              variant="ghost"
              size="icon-sm"
              data-order={order.number}
              aria-label={`Archive ${order.number}`}
              onClick={() => archive(order.number)}
            >
              <ArchiveIcon aria-hidden="true" />
            </Button>
          </li>
        ))}
      </ul>
      <p role="status" className="text-xs text-muted-foreground">
        {shown.length === 0 ? "Nothing left to archive." : restored}
      </p>
    </div>
  )
}

"use client"

import { UserPlusIcon } from "lucide-react"

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

// The title says what happened in a few words; the description carries what
// the reader needs next — the figures, and what the next step will cost.
export default function ToastDescription() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.add({
          title: "Invites sent to 2 people",
          description: "That fills Northwind’s 30 seats on Team. The next invite needs the Enterprise plan.",
          type: "warning",
        })
      }
    >
      <UserPlusIcon data-icon="inline-start" aria-hidden="true" />
      Invite 2 people
    </Button>
  )
}

"use client"

import { DownloadIcon } from "lucide-react"

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

/** Stands in for the export request: the file is ready in under two seconds. */
function exportOrders() {
  return new Promise<{ file: string; rows: number }>((resolve) =>
    setTimeout(() => resolve({ file: "orders-2026-08.csv", rows: 77 }), 1800)
  )
}

// One toast from start to finish: it spins while the promise runs — holding
// still for a reader who asked for less motion — and turns into the result in
// place, so the polite region reads the change instead of a second toast.
export default function ToastPromise() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast
          .promise(exportOrders(), {
            loading: { title: "Exporting 77 August orders…" },
            success: (result) => ({
              title: "Export ready",
              description: (
                <>
                  <span className="font-mono">{result.file}</span> · {result.rows} rows
                </>
              ),
            }),
            error: { title: "The export failed", description: "Nothing was saved. Try again in a minute." },
          })
          // The toast has told the reader; the rejection is handled here.
          .catch(() => {})
      }
    >
      <DownloadIcon data-icon="inline-start" aria-hidden="true" />
      Export August orders
    </Button>
  )
}

"use client"

import { WrenchIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { KbdShortcut } from "@/components/ui/kbd-shortcut"
import { toast } from "@/components/ui/toast"

// `timeout: 0` keeps it up until someone closes it, for a notice that matters
// until tonight. The id means a second press updates it instead of stacking a
// copy. It never takes the focus: F6 reaches the stack and Esc dismisses it.
export default function ToastPersistent() {
  return (
    <div className="flex flex-col items-center gap-3">
      <Button
        variant="outline"
        onClick={() =>
          toast.add({
            id: "checkout-maintenance",
            title: "Checkout pauses tonight",
            description: "From 23:00 to 23:30 UTC, while the payments database is upgraded.",
            type: "info",
            timeout: 0,
          })
        }
      >
        <WrenchIcon data-icon="inline-start" aria-hidden="true" />
        Post maintenance notice
      </Button>
      <p className="flex flex-wrap items-center justify-center gap-1.5 text-xs text-muted-foreground">
        <KbdShortcut keys="f6" size="sm" /> reaches the notifications,
        <KbdShortcut keys="esc" size="sm" /> dismisses one.
      </p>
    </div>
  )
}

"use client"

import * as React from "react"
import { ListPlusIcon } from "lucide-react"

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

const ORDERS = ["ORD-100037", "ORD-100013", "ORD-100073"]

// Every press reuses one id, so the toast already up changes in place — its
// count, its list and a fresh timer — instead of a new one piling onto the
// stack for each order. When it goes, the export starts over.
export default function ToastUpdate() {
  const queued = React.useRef<string[]>([])

  function add(order: string) {
    if (!queued.current.includes(order)) queued.current = [...queued.current, order]
    const count = queued.current.length
    toast.add({
      id: "export-queue",
      title: `${count} ${count === 1 ? "order" : "orders"} in the export`,
      description: <span className="font-mono text-xs">{queued.current.join(", ")}</span>,
      onClose: () => {
        queued.current = []
      },
    })
  }

  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      {ORDERS.map((order) => (
        <Button key={order} variant="outline" size="sm" aria-label={`Add ${order} to the export`} onClick={() => add(order)}>
          <ListPlusIcon data-icon="inline-start" aria-hidden="true" />
          <span className="font-mono text-xs">{order}</span>
        </Button>
      ))}
    </div>
  )
}

"use client"

import { UploadIcon } from "lucide-react"

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

const RESULTS = [
  { title: "46 customers imported", type: "success" },
  { title: "3 merged with existing customers", description: "Matched on email; the newer details win.", type: "info" },
  { title: "2 rows skipped", description: "Rows 17 and 31 have no email address.", type: "warning" },
]

// Three results of one import arrive together and stack, newest in front.
// Pointing at the stack or tabbing into it fans them out and holds their
// timers, so none leaves while it is being read.
export default function ToastStacked() {
  return (
    <Button
      variant="outline"
      onClick={() => RESULTS.forEach((result, index) => setTimeout(() => toast.add(result), index * 250))}
    >
      <UploadIcon data-icon="inline-start" aria-hidden="true" />
      Import customers.csv
    </Button>
  )
}

"use client"

import { Share2Icon } from "lucide-react"

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

// A stack of its own, for a layout whose bottom corner is taken. At the top it
// grows down, its toasts come in from above and swipe up to go, and its
// region has a name of its own beside the page's main Notifications.
const sharing = createToastManager()

export default function ToastPositioned() {
  return (
    <>
      <Toaster toastManager={sharing} position="top-center" label="Sharing notifications" />
      <Button
        variant="outline"
        onClick={() =>
          sharing.add({
            title: "Shared with Finance",
            description: "4 people can now open Revenue by channel.",
            type: "success",
          })
        }
      >
        <Share2Icon data-icon="inline-start" aria-hidden="true" />
        Share with Finance
      </Button>
    </>
  )
}