Skip to main content

Modal

A modal is used to reveal critical information, show information without losing context, or when the system requires a user response.

Structure​

  • Backdrop: Transparent overlay that contains the modal dialog.
  • Title: A question or descriptive phrase that conveys an overview of the purpose.
  • Dialog: Modal dialog container.
  • Dismissal: Button element to dismiss the modal.
  • Message: Text content indicating the purpose and potential next steps.
  • Actions: Buttons used to provide explicit action(s) the user can take to either close the modal or continue with a task.

Guidelines​

When to use​

  • For necessary actions outside the main flow.
  • When the action doesn’t benefit from the context of the current screen.
  • To interrupt the flow and force attention.

When not to use​

  • When you have only a single simple action—use a dialog.
  • For little information that doesn’t disrupt the main flow—use a popover.
  • For a temporary message without actions—use a toast.

Behaviour​

Open on user action​

Modals disrupt the main flow. If they come as a surprise, they’re more likely to be dismissed. Only open a modal after the user has taken an action so it’s clear why it was triggered.

Direct user with the title​

A modal title sets the context for everything inside and also stays fixed at the top if the modal scrolls down. So the title should make it clear what the modal relates to and what actions might be expected of the user. Keep it short and focused on either an action (verb) or a category (noun).

Do
  • Edit email address
  • Delete employee?
  • Discard unsaved changes?
Don't
  • Edit the email address for this employee
  • Are you sure you want to delete employee?
  • Discard?

Allow users to close​

Users want to feel in control of their actions. Since modals act as interruptions, they can invoke negative feelings in users. Make sure users feel in control by offering them a clear option to close the modal and get back to the main flow.

Modals should always include a close button in the footer (with a name appropriate to the situation).

If you have a primary action in the modal footer that results in a system change, then you should have a Cancel button. If the modal is providing information and there is no action to take, you should have a Close button.

If there is only one option and it's ‘Close’ (not a primary action) then the close function can be handled by the top right X, and buttons in the footer are not mandatory. Desktop modals should include a close button in the upper right and (unless you need an explicit close, such as for cookie consent) the option to close the modal by clicking the overlay.

Button position​

If there is only one button on the modal footer, position it at the bottom-right.

Accessibility​

TODO

Add accessibility requirements and considerations.