104Get started
HextaUI

Toast: Update in place

Keep the id from toast.loading and change it with toast.update, including its type.

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

Add this example

This adds the example as components/examples/toast/update.tsx, together with the Toast component and the HextaUI theme tokens it needs.

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

To add only the component, follow the Toast installation.

More Toast examples

See them all, with keyboard support and accessibility notes, on the Toast page.

Related components