Overlay

Status

Component checklist

Key points

• Overlays are center-aligned on the screen and resize based on the viewport
• Overlays can contain more custom content than modals, including long-form content
• Overlays are used for supporting information related to the page (e.g., videos with transcripts, legal documentation, detailed explanations)
• Overlays share the same display and dismissal patterns as modals
• Like modals, the background overlay blocks content below to focus the user's attention
• If the overlay fits on screen, it has margin above and below; if larger than the viewport, a scrollbar allows users to scroll

Use overlays to display supporting information or content related to the current page in a centred, scrollable dialogue.