Alert Dialog Component
Modal dialogs for confirmations and important actions with orbit-styled containers.
Basic Alert Dialog
Click Outside to Close
Use the standard Dialog component when you want users to be able to dismiss by clicking outside.
Delete Confirmation
Logout Confirmation
Warning Dialog
Download Confirmation
Inline Confirmation Pattern
For simpler confirmations, consider an inline card pattern that matches the Orbit Capsule style.
Remove item?
Are you sure you want to remove this item from your cart?
API Reference
AlertDialog
| Prop | Type | Description |
|---|---|---|
| open | boolean | Controlled open state |
| defaultOpen | boolean | Default open state |
| onOpenChange | (open: boolean) => void | Callback when open state changes |
Subcomponents
AlertDialogTrigger— Button that opens the dialogAlertDialogContent— The modal content containerAlertDialogHeader— Header section wrapperAlertDialogTitle— Title textAlertDialogDescription— Description textAlertDialogFooter— Footer section for actionsAlertDialogAction— Primary action buttonAlertDialogCancel— Cancel/secondary button