104Get started
HextaUI

Toast: Action

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

0 archived

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

Add this example

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

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