Modal panel

When to use

• Use a modal when the task requires the user's full attention and should not compete with the rest of the page
• Use a modal for experiences that take over the screen, such as a full navigation menu or a full filtering overlay

When not to use

• If you only need to surface a small set of controls alongside the current page, use a popover instead. A modal takes over the screen and is too heavy for lightweight, contextual interactions

Content guidance

• Keep the heading short and descriptive of the task or content inside
• If the modal includes a button, use a action verb for the button label e.g. Apply filters or Save changes rather than a generic label like "Done" or "Submit"
• If the modal includes a back arrow, the heading should describe where the user is, not where they came from

How it works

The modal slides in as a layer above the page, leaving a visible gap at the top and bottom of the frame so the user can see that the underlying page is still there. This reinforces that the modal is a temporary layer, not a new page.

Focus is trapped inside the modal while it is open. The user can dismiss it by tapping the back arrow or completing the action via the button. The modal can also be dismissed by pressing Escape.

Accessibility

This component is designed with accessibility built in:

• Focus is trapped inside the modal while it is open
• The heading provides an accessible label for the modal content
• Colour contrast meets requirements across all states and both themes

When implementing, verify:

• Focus returns to a logical place when the modal is dismissed
• Escape key dismisses the modal
• If the modal heading does not fully describe the content, an additional aria-label is provided
• Screen readers announce the modal when it opens

Resources

• Figma
• Storybook