---
category: overlays
---

# AlertDialog

Source: `components/ui/alert-dialog.tsx`.

`AlertDialog` is a compound component. Its parts are exported **flat** (`AlertDialogPortal`, not
`AlertDialog.Portal`) and each is a separate top-level export of the bundle:

| Part | Props |
| --- | --- |
| `AlertDialogPortal` | `React.ComponentProps<typeof AlertDialogPrimitive.Portal>` |
| `AlertDialogOverlay` | `React.ComponentProps<typeof AlertDialogPrimitive.Overlay>` |
| `AlertDialogTrigger` | `React.ComponentProps<typeof AlertDialogPrimitive.Trigger>` |
| `AlertDialogContent` | `React.ComponentProps<typeof AlertDialogPrimitive.Content>` |
| `AlertDialogHeader` | `React.ComponentProps<'div'>` |
| `AlertDialogFooter` | `React.ComponentProps<'div'>` |
| `AlertDialogTitle` | `React.ComponentProps<typeof AlertDialogPrimitive.Title>` |
| `AlertDialogDescription` | `React.ComponentProps<typeof AlertDialogPrimitive.Description>` |
| `AlertDialogAction` | `React.ComponentProps<typeof AlertDialogPrimitive.Action>` |
| `AlertDialogCancel` | `React.ComponentProps<typeof AlertDialogPrimitive.Cancel>` |

All parts accept `className` and are composed as children of `AlertDialog`.