ActionButton
Run an async action on click, with an optional confirmation dialog.
Example
Installation
- 1
Add the shadcn/ui components
bunx --bun shadcn@latest add button alert-dialog field spinner toast - 2
Copy the ActionButton files
Usage
Terminal
import { ActionButton } from "@/components/ui/action-button"
<ActionButton action={deleteProject} requireAreYouSure> Delete project</ActionButton>API reference
ActionButton
PropDescription
action (required)() => Promise<{ error: boolean; message?: string }>Runs on click, or on confirm when requireAreYouSure is set.requireAreYouSureboolean = falseOpens a confirmation dialog before running action.areYouSureDescriptionReact.ReactNode = "This action cannot be undone."Dialog body text....button propsReact.ComponentProps<typeof Button>Any Button prop.Notes
- Mount Toaster from @/components/ui/toast once in the root layout. Error toasts do not render without it.
- Without confirmation the button disables itself and swaps its label for a spinner while action runs.
- With requireAreYouSure the dialog cannot be dismissed while action runs and closes when action succeeds.
- If action returns error: true or throws, a toast shows message (Something went wrong. when absent) and the dialog stays open showing the same message.