Variants
Three interaction patterns: confirm, destructive, and informational. Confirm and destructive modals always include Cancel + a primary action. Informational modals use a single Close button.
Confirm
Destructive
Informational
With form
Sizes
Three widths. Use sm for simple confirmations, md (default) for most dialogs, lg for complex forms or content-heavy tasks.
sm · 440px
md · 560px
lg · 720px
Anatomy
BackdropFixed full-screen scrim (rgba 0,0,0,0.48). Clicking it closes the modal.DialogCentered card with max-height: calc(100vh − 64px) and vertical scroll on the body.HeaderTitle (required), optional description, and a close × button in the top-right.BodyScrollable content area. Accepts any ReactNode — text, forms, lists.FooterAction buttons right-aligned. Primary action on the right, Cancel on the left.Keyboard & accessibility
EscapeClose the modal.TabCycle forward through focusable elements within the dialog.Shift + TabCycle backward.Click backdropClose the modal.role="dialog"Announces the dialog to screen readers. aria-labelledby points to the title.aria-modalPrevents screen readers from browsing outside the open dialog.Usage guidance
DoUse for irreversible or high-stakes actions (delete, publish, deactivate).DoKeep modal titles short and action-oriented: "Delete component?" not "Are you sure?"DoReturn focus to the trigger element after the modal closes.Don'tNest modals. One at a time only.Don'tUse a modal for success states — prefer Toast for non-blocking feedback.Don'tPut a scrolling table or complex navigation inside a modal — use a full page instead.Tokens used
bg/baseDialog backgroundtext/baseTitle texttext/subtleDescription, body text, close button iconborder/subtleHeader and footer dividersborder-width/baseDivider weight (1px)bg/faintClose button hover backgroundradius/xlDialog corner radius (16px)radius/mdClose button hover radius (8px)space/5Header and body vertical padding (20px)space/6Header and body horizontal padding (24px)space/4Footer vertical padding (16px)space/3Footer button gap (12px)