# Toast: No duplicates

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

Example: https://hextaui.com/docs/toast/examples/dedupe
Component docs: https://hextaui.com/docs/toast.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/toast-dedupe.json
```

This adds `components/examples/toast/dedupe.tsx` with the Toast component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/toast/dedupe.tsx"
"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>
  )
}
```

## More Toast examples

- [Types](https://hextaui.com/docs/toast/examples/types.md)
- [Promise](https://hextaui.com/docs/toast/examples/promise.md)
- [Action](https://hextaui.com/docs/toast/examples/action.md)
- [Update in place](https://hextaui.com/docs/toast/examples/update.md)
