Modal

Use modals to:

• Display important information that requires user attention
• Present short forms or inputs that don't require a full page
• Show notifications or alerts that interrupt the user's workflow intentionally
• Ask users to make a focused decision

Do not use modals:

• For lengthy content that exceeds the viewport height, use a drawer instead
• For complex multi-step processes — use a dedicated page instead
• When users need to reference information on the underlying page, consider an alternative pattern or a drawer
• For non-essential information — use less intrusive patterns like callouts or inline messages
• When users are likely to need to interact with content behind the modal

Modals vs overlay dialogues vs drawers

---

Structure

Modals are containers that have:

• Title — Clear, concise heading describing the modal purpose
• Text summary — Brief explanation or context
• Button groups — Action buttons for user decisions
• Close button — Icon button in the top-right corner
• Overlay — Darkened background that blocks underlying content

Modal patterns

Although modals can contain any content, there are a number of common patterns.

Notifications

Present a message that the user can dismiss without taking action.

Composition:

• Title
• Text summary
• Close button only (no button groups)

Use notifications to:

• Inform users of system status or updates
• Display non-critical alerts
• Show messages that don't require a response

Confirm or cancel

Request user confirmation before proceeding with an action, with the option to cancel.

Composition:

• Title
• Text summary
• Close button (icon)
• Button group with confirm and cancel buttons

Use confirm or cancel to:

• Request confirmation before destructive actions (e.g., deleting, discarding changes)
• Ask users to verify their choice
• Provide an explicit way to back out of an action

Key difference from notifications: Unlike notifications, the user can do nothing; they are presented with a close icon and a cancel button.