Skip to content

Alert Dialog

Feedback

Pauses a workflow for a focused confirmation before a consequential action proceeds.

React · copy into your project · light and dark themes

Try it

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/alert-dialog.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/alert-dialog.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using alert dialog

Describe the consequence with AlertDialogTitle and AlertDialogDescription, then provide explicit Action and Cancel choices.
Run the operation in the action handler and manage open state when completion depends on an asynchronous result.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

AlertDialogProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogTriggerProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogPortalProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogOverlayProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogContentProps

Prop	Type	Required
`showCloseButton`	`boolean`	No

AlertDialogHeaderProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogFooterProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogTitleProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogDescriptionProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogActionProps

Accepts the native or primitive props declared by its exported TypeScript type.

AlertDialogCancelProps

Accepts the native or primitive props declared by its exported TypeScript type.

Accessibility

Preserve the dialog title, description, and cancel action so the focused confirmation has an accessible name and a clear exit.

States and appearance

openresthoverfocusactive

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.