Alert Dialog

A modal dialog that interrupts the user to confirm an action or display critical information before proceeding .

Delete Confirmation

Are you sure you want to delete this item? This action cannot be undone.

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/AlertDialog

Usage

import { AlertDialog } from "@/components/display-ui/AlertDialog"

<AlertDialog.Main>
  <AlertDialog.Trigger>Open Alert</AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Title>Delete Confirmation</AlertDialog.Title>
    <AlertDialog.Description>
      Are you sure you want to delete this item? This action cannot be undone.
    </AlertDialog.Description>
    <AlertDialog.Actions>
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Confirm onClick={() => alert("Item Deleted!")}>
        Delete
      </AlertDialog.Confirm>
    </AlertDialog.Actions>
  </AlertDialog.Content>
</AlertDialog.Main>

API

Alert-Dialog Props

For Main AlertDialog Content

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	The root container for the alert dialog. Must wrap Trigger and Content components.	-
defaultOpen	`boolean`	Controls whether the dialog is open by default on initial render.	false

For AlertDialog Trigger

Attribute	Type	Description	Default
children	`ReactNode`	The content displayed inside the trigger button that opens the dialog.	-
className	`string`	Additional CSS classes to customize the trigger button styling.	-

For AlertDialog Content

Attribute	Type	Description	Default
children	`ReactNode`	The main dialog content. Typically includes Title, Description, and Actions.	-
className	`string`	Additional CSS classes applied to the dialog content container.	-

For AlertDialog Title

Attribute	Type	Description	Default
children	`ReactNode`	The heading text displayed at the top of the dialog.	-
className	`string`	Additional CSS classes to customize the title styling.	-

For AlertDialog Description

Attribute	Type	Description	Default
children	`ReactNode`	Descriptive text providing more context about the dialog action.	-
className	`string`	Additional CSS classes to customize the description text.	-

For AlertDialog Actions

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Container for action buttons such as Cancel and Confirm.	-
className	`string`	Additional CSS classes to customize the actions layout.	-

For AlertDialog Content

Attribute	Type	Description	Default
children	`ReactNode`	Label displayed inside the cancel button. Closes the dialog when clicked.	-
className	`string`	Additional CSS classes to customize the cancel button styling.	-

For AlertDialog Confirm

Attribute	Type	Description	Default
children	`ReactNode`	Label displayed inside the confirm button.	-
onClick	`(event: React.MouseEvent<HTMLButtonElement>) => void`	Callback fired when the confirm button is clicked. The dialog closes automatically after execution.	-
className	`string`	Additional CSS classes to customize the confirm button styling.	-

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

Delete Confirmation

Installation

Usage

API

Alert-Dialog Props

Credits

On this page

Delete Confirmation