Overview

Overlays are components that sit above the base surface. Components include dropdowns, modals and toasts.

Overlays focus the user on content related to the current page or process.

Components stack on top of each other. Use the correct elevation levels and design tokens to maintain proper order.

Key Points

• Overlays display over all other content
• The overlay background blocks interaction with content below until dismissed
• Check the usage and key points of each component to identify any conflicts or stacking rules
• Include keyboard controls and navigation for assistive technologies