104Get started
HextaUI

Toast: No duplicates

Give a toast an id and calling it again updates the existing one instead of stacking a copy.

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

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/toast-dedupe.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