A dialog that is used to display a message to the user. It is used to confirm or cancel an action.
"use client" import AlertDialog from "@radui/ui/AlertDialog"; const AlertDialogExample = () => { return ( <div className="w-64 md:w-96 flex justify-center items-center"> <AlertDialog.Root> <AlertDialog.Trigger> Open Dialog </AlertDialog.Trigger> <AlertDialog.Portal> <AlertDialog.Overlay /> <AlertDialog.Content> <AlertDialog.Title> Are you sure you want to delete this file? </AlertDialog.Title> <AlertDialog.Description> This action cannot be undone. </AlertDialog.Description> <AlertDialog.Action> Delete </AlertDialog.Action> <AlertDialog.Cancel> Cancel </AlertDialog.Cancel> </AlertDialog.Content> </AlertDialog.Portal> </AlertDialog.Root> </div>) } export default AlertDialogExample;
Import all parts of the component and piece them together
import AlertDialog from "@radui/ui/AlertDialog"; export default () => { return ( <AlertDialog.Root> <AlertDialog.Trigger/> <AlertDialog.Portal> <AlertDialog.Overlay/> <AlertDialog.Content> <AlertDialog.Title/> <AlertDialog.Description/> <AlertDialog.Cancel/> <AlertDialog.Action/> </AlertDialog.Content> </AlertDialog.Portal> </AlertDialog.Root> ) }
The root component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
className | string | -- |
customRootClass | string | -- |
open | boolean | false |
onOpenChange | function | -- |
onClickOutside | function | -- |
The trigger component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
className | string | -- |
asChild | boolean | false |
The portal component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | -- |
The overlay component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
className |
The content component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
className | ||
children | ReactNode | -- |
The title component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
className | ||
children | ReactNode | -- |
The description component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
className | ||
children | ReactNode | -- |
The action component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
className | ||
children | ReactNode | -- |
asChild | boolean | false |
The cancel component for the AlertDialog.
| Prop | Type | Default |
|---|---|---|
className | ||
children | ReactNode | -- |
asChild | boolean | false |