Modals are floating containers that can house straightforward messages or custom interfaces that are triggered contextually.
Overview
Modals are designed for interactions when the main interface cannot contain descriptions or workflows within a given space. Modals have a Scrim and lock the user into directly interacting with it. This can be useful when the user needs to perform an action or function to continue.
Modals should not be relied upon for primary workflows, and should be used sparingly.
Usage
- Contextual workflows or messaging
- Focused tasks
- Error messaging
- Onboarding
Sample
Accessibility
It is strongly recommended to have focusable elements cycle through Modal where focus is false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is open only the contents and focusable elements are accessible.
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next focusable element. If the current focus is the last element and focus is false, focus will cycle to the first element. |
Tab and Shift | Moves focus to previous focusable element. If the current focus is the first element and focus is false, focus will cycle to the last element. |
Esc | If escape is false, closes the component. |