edbnedbn/ui
Get Started
WelcomeChangelogLicenseOverview
Components
ButtonAlert Dialog
PopoverDropdown Menu
Motion
Motion ProviderSpring PresetsHooks
Components
Blocks
HomeDocsComponentsDialogs

On this page

Alert Dialog

A modal dialog with morphing animations, spring physics, and focus management. Built with Motion for smooth layout animations and transitions.

Source Code

Copy and paste the following code into your project.

Installation

This will also install: motion-provider, button

Terminal
npx shadcn@latest add https://ui.edbn.me/r/alert-dialog.json

Basic Usage

A morphing dialog with smooth layout animations and spring physics.

With Subtitle

Use subtitle for additional context.

Common Patterns

Example use cases for morphing dialogs.

API Reference

AlertDialog.Root

PropTypeDefaultDescription
childrenReactNode—The content of the dialog which could include triggers and content
transitionTransition—Transition settings from motion for animation effects

AlertDialog.Trigger

PropTypeDefaultDescription
childrenReactNode—Content of the trigger, typically a string or formatted text
classNamestring—Optional CSS class for styling the trigger element
styleReact.CSSProperties—Inline styles for the trigger element
triggerRefReact.RefObject—Ref to attach to the trigger element, useful for managing focus

AlertDialog.Content

PropTypeDefaultDescription
childrenReactNode—The content displayed within the dialog when it is open
classNamestring—Optional CSS class for styling the content container
styleReact.CSSProperties—Inline styles for the content container

AlertDialog.Body

PropTypeDefaultDescription
childrenReactNode—The main content of the dialog including header and footer
classNamestring—Optional CSS class for customizing padding and spacing

Provides consistent padding (p-6 sm:p-8), centered layout, and proper spacing. Use as direct child of AlertDialog.Content for beautiful defaults.

AlertDialog.Header

PropTypeDefaultDescription
childrenReactNode—Title, subtitle, and description elements
iconReactNode—Optional icon element to display above content
iconClassNamestring—CSS classes for the icon wrapper (e.g., 'bg-destructive/10')
classNamestring—Optional CSS class for the header container

Centers title and description with Premium spacing. Pass an icon prop for automatic circular background styling.

AlertDialog.Footer

PropTypeDefaultDescription
childrenReactNode—Action buttons (AlertDialogAction, AlertDialogCancel)
classNamestring—Optional CSS class for customizing button layout

Stacks buttons vertically with consistent spacing (Premium). Buttons automatically take full width.

AlertDialog.Title

PropTypeDefaultDescription
childrenReactNode—The title content of the dialog
classNamestring—Optional CSS class for the title element
styleReact.CSSProperties—Inline styles for the title element

AlertDialog.Subtitle

PropTypeDefaultDescription
childrenReactNode—The subtitle content of the dialog
classNamestring—Optional CSS class for the subtitle element
styleReact.CSSProperties—Inline styles for the subtitle element

AlertDialog.Description

PropTypeDefaultDescription
childrenReactNode—The descriptive content of the dialog
classNamestring—Optional CSS class for the description container
disableLayoutAnimationbooleanfalseIf true, disables layout animations for the description
variantsObject—Variants for the animation states of the description

AlertDialog.Image

PropTypeDefaultDescription
srcstring—Image source URL
altstring—Alternative text for the image
classNamestring—Optional CSS class for the image element
styleReact.CSSProperties—Inline styles for the image element

Best Practices

Action Clarity

Use asChild pattern
Pair asChild with Button so only the surface morphs and text stays crisp.
Lead with consequence
Put the destructive action on the right of the footer. Keep primary copy short (2 lines max).

Safety Net

Disable until ready
Disable confirmation button until critical data needed to proceed is available.
Explicit confirmation
Require explicit action (checkbox, text confirm) only for irreversible flows.

Copy Guidelines

Use action verbs
Use verbs on actions ("Delete account", "Keep data") so the choice is clear without scanning the body.
Highlight consequences
Add the most alarming fact in the description, not the header (e.g., "removes all backups").

Accessibility

Alert dialog pattern for critical actions that require confirmation.

Keyboard

TabNavigate through dialog
⇧+Tab
Navigate backwards
EscClose dialog (disabled for destructive)

Screen Readers

• role="alertdialog" with aria-modal

• Title linked via aria-labelledby

• Async states use aria-busy

Focus Management

Initial focus
Focus moves to the first interactive element when opened.
Focus trapping
Focus stays inside until an action is taken.
Focus restoration
On close, focus returns to the trigger element.