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.
Design
Implementation
Required Components
- The Modal component can be used on its own and does not require additional components.
- Contain a short actionable message
- If conveying a status, Modals should follow status color guidelines
- Be used for messages that are not intended to interrupt a user’s workflow. For passive alerts, see the Messages component.
- 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.