Alert Dialog Wrapper

View in Storybook

AlertDialogWrapper is a convenience component built on top of Radix UI's AlertDialog. It provides pre-wired action/cancel buttons and configurable header content — ideal for confirmation flows.

Installation

1. Install the AlertDialog primitive via shadcn:

npx shadcn@latest add alert-dialog

2. Copy the wrapper source:

Source: packages/ui/src/common/overlays/alert-dialog-wrapper.tsx
Place in your project: components/common/overlays/alert-dialog-wrapper.tsx
Required components: components/ui/alert-dialog.tsx, lib/utils.ts

3. Update the import paths to match your project structure.

Usage

import { AlertDialogWrapper } from "@hoag/ui/alert-dialog-wrapper";
import { Button } from "@hoag/ui/components/button";
 
export default function Demo() {
  return (
    <AlertDialogWrapper
      trigger={<Button variant="destructive">Delete</Button>}
      title="Delete item"
      description="This action cannot be undone."
      actionLabel="Delete"
      cancelLabel="Cancel"
      actionVariant="destructive"
    />
  );
}

Default

<AlertDialogWrapper
  trigger={<Button variant="outline">Open Alert</Button>}
  title="Are you sure?"
  description="This action cannot be undone."
  actionLabel="Continue"
  cancelLabel="Cancel"
/>

Destructive Action

<AlertDialogWrapper
  trigger={<Button variant="destructive">Delete account</Button>}
  title="Delete account"
  description="This will permanently delete your account and all associated data."
  actionLabel="Delete"
  cancelLabel="Cancel"
  actionVariant="destructive"
/>

API Reference

Props

Prop	Type	Default	Description
`trigger`	`ReactNode`	—	Element that opens the alert dialog
`title`	`string`	—	Alert dialog title
`description`	`string`	—	Alert dialog description
`actionLabel`	`string`	`"Continue"`	Confirm action button label
`cancelLabel`	`string`	`"Cancel"`	Cancel button label
`actionVariant`	`"default" \| "destructive"`	`"default"`	Action button variant
`showDefaultActions`	`boolean`	`true`	Show built-in action/cancel buttons
`onActionClick`	`() => void`	—	Callback on confirm action click
`onCancelClick`	`() => void`	—	Callback on cancel click
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes

Dialog Sheet