components / Structure

Modal

Default Modal

Size

Modals have four sizes depending on the width of content that needs to be displayed. Medium is the default size.

Scrolling Content

When the content of the modal is larger than the screen supports, it becomes scrollable with consistent spacing between the screen edge and the modal.

Non-closable Modals

For mandatory workflows and notifications, we can also remove the close functionality. The close button in the Modal Header does not appear and clicking on the backdrop doesn't do anything.

The Modal Footer can have a few layouts depending on the needs of the Modal. Usually they fall into one of these four layouts.


Best Practices

A Modal should:

  • Be used to display critical information or workflows that do not merit full pages
  • Include clear call-to-actions for the user to proceed, cancel, or close
  • Be used sparingly because they are purposefully interruptive

Content Guidelines

Write titles as verbs

Titles should have a clear verb + noun question or statement.

Follow the content guidelines for headings and subheadings.

  • Edit customer information
  • Delete message?
  • Discard unsaved changes?
  • Edit the service agreement for this customer
  • Are you sure you want to remove the invoice?
  • Delete?

Make body content concise and actionable

Use imperative verbs when telling users what they need to know or do. Don’t use permissive language like "you can".

  • Notification emails will be sent to this address.
  • This cannot be undone.
  • You can edit the email address where emails will be sent.
  • Are you sure you want to delete this job? You can’t reverse this.

Buttons should be clear, predictable, and action-oriented

Users should be able to predict what will happen when they click a button.

Lead with a strong verb that encourages action. Use a verb/noun pair on actions in most cases. Common actions like Save, Close, or Cancel do not require an accompanying noun.



  • To completely hide the context of the page, use a Takeover component.
  • For critical information that requires a specific decision, use a Dialog component.
  • For informative or basic actions that do not interrupt the user flow, use a Popover.

Importing