# Toast: Promise

> `toast.promise` shows a spinner, then turns into a success or error toast in place, with the icon popping in as it changes.

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

## Add this example

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

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

## Source

```tsx title="components/examples/toast/promise.tsx"
"use client"

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

let attempt = 0

function deploy() {
  attempt += 1
  const fails = attempt % 2 === 0
  return new Promise<{ url: string }>((resolve, reject) =>
    setTimeout(
      () =>
        fails
          ? reject(new Error("Build failed"))
          : resolve({ url: "hextaui.com" }),
      1800
    )
  )
}

export function ToastPromise() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.promise(deploy(), {
          loading: "Deploying…",
          success: (data) => ({
            title: "Deployed",
            description: `Live at ${data.url}`,
          }),
          error: (error) => ({
            title: "Deploy failed",
            description: error instanceof Error ? error.message : "Try again.",
          }),
        })
      }
    >
      Deploy (fails every other time)
    </Button>
  )
}
```

## More Toast examples

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