Dialog Component

Overview

Dialog can grow from the button that opened it and shrink back on close, with optional elastic overshoot. Content fades and scales in after the panel arrives, and a blocked outside click can trigger a brief shake while a dimmed or blurred backdrop keeps focus on the dialog.

Use it when users must review information, confirm an action, or finish a short task before returning, such as subscription changes, destructive confirmations, and account settings. It should always be clear why it opened and how to continue or leave.

Theme and Interaction Customisation

Choose clear, dimmed, or blurred backdrops, panel roundness, and a trigger with rolling text or pointer-origin fill. Opening options include origin from trigger, elastic, duration, bounce, and content fade and scale, while closing options cover exit animation, content fade-out, click-outside dismissal, and shake when blocked.

Example Production Use Case

A subscription dashboard can open a Pause subscription dialog from its button, explaining billing effects. Outside clicks are blocked with a shake, Confirm stays pending until the service responds, and Cancel shrinks it back to the trigger.

A project tool can use a dimmed dialog to confirm archiving a project, keeping the board visible behind it so users remember what they’re acting on.

An account settings page can open a small form dialog to update an email address, with elastic entry kept subtle so the form stays easy to read.

Best Used For

• Confirmation workflows.
• Subscription management.
• Account settings and profile edits.
• SaaS dashboard action panels.
• Project management confirmations.
• Ecommerce order-related decisions.
• Administrative actions needing validation.
• Short, self-contained product workflows.

Not For

Routine actions that can complete safely inline are better confirmed with inline feedback or a Toast.

Long content or multi-step workflows belong on a dedicated page, and supporting details may suit a drawer or Tooltip instead.

Don’t use excessive shake or overshoot to force attention, since high-stakes actions need clear wording, not more motion.

Performance Budget

Measure trigger and panel geometry once rather than per frame, use transforms and opacity, and keep backdrop and panel in sync. Let elastic motion settle quickly, keep content fades short, and clean up listeners and focus state on close.

Accessibility and Mobile

Use a dialog role with an accessible title, move focus inside and trap it while open, make the background inert, and return focus to the trigger on close. Support Escape where appropriate, and never leave users without a way to cancel when outside clicks are blocked. On mobile, fit the viewport and keyboard, scroll long content internally, and keep actions reachable. With reduced motion, remove expansion, bounce, scaling, and shaking.

Common Mistakes

• Treating a closed dialog as a completed action.
• Letting backdrop clicks close critical workflows by accident.
• Ignoring that disablePointerDismissal overrides Click outside closes.
• Using Bounce without Elastic or Scale content without Fade content.
• Expecting the exit animation to override trigger-origin closing.
• Shaking for unrelated errors like failed requests.
• Losing keyboard focus on open or close.
• Overanimating simple confirmations.
• Forgetting the mobile viewport and keyboard.
• Ignoring reduced-motion preferences.