arca-ui

Alert Dialog

Dialog surfaces carry the elevation; actions inside default to flat variants.

Basic Dialog

Default AlertDialog uses default elevation. Use elevated for important confirmations.

Elevation

Three elevation levels for different contexts. AlertDialog is always a modal overlay, so flat variant doesn't apply.

Elevated

Strong shadow for important confirmations and hero moments.

Default

Medium shadow for general dialogs.

Outlined

Border only, no shadow. Lightweight for frequent interactions.

Click Outside to Close

This dialog can be closed by clicking the overlay.

Animation Variants

Different entrance animations using Framer Motion.

Animated Inner Content

Dialog with staggered content animations.

Delete Confirmation

Sign Out Confirmation

Warning Dialog

With Icon

Save Changes Dialog

API Reference

AlertDialog component with 3-level elevation system.

AlertDialogContent Props

PropTypeDescription
elevation"elevated" | "default" | "outlined"Shadow level

Elevation Levels

ElevationShadowUse Case
elevatedStrongHero moments, high-stakes confirmations
defaultMediumGeneral dialogs (default)
outlinedNone (border)Frequent interactions