Skip to main content
github-icon
storybook-icon
ModalModals are overlays that interrupt a user’s workflow to convey an important message. The component must be wrapped in an OverlayProvider, and the first child should be a trigger, such as Button.
Required Components
  • The Modal component can be used on its own and does not require additional components.
Best PracticesModal should:
  • Contain a short actionable message
  • If conveying a status, Modals should follow status color guidelines
Modal shouldn’t:
  • Be used for messages that are not intended to interrupt a user’s workflow. For passive alerts, see the Messages component.
AccessibilityLabellingThe trigger button should have a correct button aria-label. A modal should have a close button that is labeled properly.Keyboard Navigation
  • When a modal opens, focus moves to an element contained in the modal, which is usually the first focusable element. If the first focusable element does not make sense, tabindex=”-1” should be added to a static element at the top of the modal. This could be the panel title.
  • Focus should be locked inside the modal.
  • Focus returns to the element that originally opened the modal.
  • Pressing Esc key should close the modal.
Default
Modals open on a trigger and require users to select an action before continuing their workflow.