Modals

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Variations

Basic Modal Requires JS

copydone

Modal with single action button Requires JS

copydone

Modal with multiple action buttons Requires JS

copydone

Modal with icon & action buttons Requires JS

copydone

Modal with form Requires JS

copydone

Usage

A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

Dialogs are purposefully interruptive, so they should be used sparingly.

  • Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
  • Clicking on the modal “backdrop” will automatically close the modal.
  • Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.

Specs

Modals consist of the following elements:

  • Modal wrapper: that acts as a backdrop to make the user focus the attention on the modal.
  • Modal: with 1.5rem (24px) internal padding.
  • Modal header: The header of the modal (any size, usually 1.125rem (18px) or 1.25rem (20px)) with a close button (icon only, base size, see buttons ).
  • Modal content: any HTML.
  • Modal actions: a set of action buttons for the modal (buttons ).

Accessibility notes

For better accessibility, the native <dialog> is not used.

To improve accessibility:

  • The modal wrapper has a role="dialog"
  • The modal wrapper has anaria-labelledby="...", referencing the id of the modal heading and modal content.
  • The modal has a role="document".
  • Modals can be closed by clicking outside the modal or by pressing the ESC button.
  • When the modal is open TAB and SHIFT+TAB should navigate only on elements inside the modal.
  • When the modal is open it prevents the underlying body from scrolling.

Check out the latest release!