# Toast: Update in place

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

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

## Add this example

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

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

## Source

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

## 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)
- [No duplicates](https://hextaui.com/docs/toast/examples/dedupe.md)