# Toast: Action

> Pass `action` for a button such as Undo. Clicking it also dismisses the toast.

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

## Add this example

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

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

## Source

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

import * as React from "react"

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

export function ToastAction() {
  const [archived, setArchived] = React.useState(0)

  return (
    <div className="flex flex-col items-center gap-3">
      <Button
        variant="outline"
        onClick={() => {
          setArchived((count) => count + 1)
          toast("Conversation archived", {
            action: {
              label: "Undo",
              onClick: () => setArchived((count) => count - 1),
            },
          })
        }}
      >
        Archive
      </Button>
      <p className="text-sm text-muted-foreground tabular-nums">
        {archived} archived
      </p>
    </div>
  )
}
```

## More Toast examples

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