Back to components

Modal

Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.

Table of Contents

Edit this section, Opens in new window

Usage

Modals inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Modals contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.

Modals should never be obscured, either by other elements or the screen edge. Modals always retain focus until dismissed or a required action has been taken.

Modals

Modals may be dismissed in 3 ways:

  • Using the “x” in the upper right-hand corner of the Modal
  • Pressing the ESC key
  • Clicking / touching outside of the Modal area

Dialogs

Dialogs can only be dismissed by taking one of the actions presented.

Types

Modal
Dialog
Responsive modal
Responsive dialog
Wider modal or dialog is possible
Do not present too many actions for the user in a dialog
Prefer as few actions as possible
A dialog cannot be dismissed by pressing esc, clicking outside the dialog or by pressing "x"
A dialog can only be dissmissed by taking one of the actions presented
Edit this section, Opens in new window

Anatomy

Header (optional)

Include a heading within the Modal that mirrors the action or button that was clicked by the user.

Body

The body content within a Modal should be as minimal as possible. Components that may be used in Modals include: Form fields, Text Area, Select, and Radio Buttons.

The footer area of a Modal typically contains a set of actions, mostly used in a Dialog. Refer to Button guidelines for usage.

Modal
  1. Dismiss button
  2. Title (optional)
  3. Body
  4. Footer (optional)
Dialog
  1. Title (optional)
  2. Footer
  3. Actions
Edit this section, Opens in new window

Accessibility

  • After the modal opens, focus must be moved to the dialog. The initial placement of the focus depends on the content of the dialog. In most cases, initial focus should be set on the first focusable element in the modal. See W3C - Modal Dialog Example, Accessibility Features section for best practices on setting focus.
  • The role='dialog' indicates to assistive technologies that a dialog has been opened.
  • The aria-modal property informs assistive technologies that content outside of the dialog element should not be accessed.
  • Use aria-labelledby to associate the modal’s heading with the modal.
  • Additionally, you can add a description of modal dialog with aria-describedby attribute.
  • A modal dialog should have an accessible title, announce itself as a dialog, and should provide standard methods for the user to close it. e.g. by a close button, by use of esc key, mouse clicking or tapping outside of the dialog, and ensuring F6 will continue to allow the user to move keyboard focus to the browser’s address bar.
  • Focus must not move outside the modal until it is closed.
  • After the modal is closed, the focus should go to the element that opened the modal dialog.
Edit this section, Opens in new window

Specs

Edit this section, Opens in new window
Contact us, Opens in new window