Design
A backdrop UI component is a layered interface element that appears above the main content to provide contextual information or interaction. It temporarily interrupts the user flow to deliver focused content, such as dialogs, tooltips, or menus. It is a visual layer that supports focus trapping and content containers.
This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use backdrop for:
- Critical decisions that might interrupt the user’s flow (confirmations, authentications, etc).
- Contextual actions such as menus, dropdowns.
- Focused tasks, for instance in side panels for editing or forms.
- To avoid that the user leaves the desired navigation flow, allowing alternative flows such as inline editing or quick previews.
Avoid backdrop when:
- Passive information (tooltips).
- There are inline alternatives.
- Backdrops are being overused.
- Accessibility is compromised.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”Backdrops can easily become barriers if not designed properly. Here’s what to focus on:
- Focus management — Trap focus within the backdrop so the users don’t accidentally navigate outside.
- Ensure that the user is able to close the modal when pressing ESC.
- Make sure that screen reader announces backdrops when they appear.
- Ensure backdrops have sufficient contrast against the background.
- Avoid excessive animations that may cause discomfort.
Properties
Section titled “Properties”Anatomy
Section titled “Anatomy”The backdrop is an element that will adapt to the screen in a fullsize form.
Its color will remain at 55% – 65% opacity (this information is contained in the Token, no need to edit color).
Note: Backdrop colour and opacity are controlled by semantic tokens (surface/backdrop/default, hover, etc.), ensuring brand consistency in dark and light themes.
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-surface-dim-neutral-default | Background color | Backdrop |
color-surface-dim-neutral-default | Background color | Backdrop |
- Interrupt the user flow for critical tasks — Confirmations (e.g., “Are you sure you want to delete?”), authentication (e.g., login modals), blocking actions until a decision is made.
- Provide contextual information or actions — Tooltips for explaining icons or terms, popovers for quick actions (e.g., formatting options), menus and dropdowns for navigation or selection.
- Focus user attention — Dialogs for form input or alerts, side panels for editing or filtering, notifications that require acknowledgment.
- Ensure backdrops always include a focus trap and return focus to the triggering element once closed.
- The backdrop itself should not receive focus or contain interactive elements; these belong to the modal, drawer, or tooltip layered above it.
- Assign
aria-hidden="true"to the backdrop layer so it’s ignored by assistive technologies. - Avoid navigation away from the current screen — Use inline editing or quick previews (e.g. document or image preview).
- Don’t use backdrops when the task is not urgent or interruptive — such as with passive information (help text or hints) or non-critical alerts. For these cases it would be best to use toasts/snackbars.
- Don’t use backdrops when it disrupts accessibility or usability — backdrops that trap focus or block keyboard navigation, poor mobile responsiveness (e.g. modals that don’t scale). Don’t use backdrops as containers for full pages or persistent UI elements.
- Don’t use backdrops when you can use inline UI instead — simple forms or filters that fit naturally on the page, navigation that’s better suited to tabs or accordions.
- Don’t use backdrops when too many backdrops stack or overlap — multiple modals or tooltips at once can confuse users. Use progressive disclosure instead (e.g., step-by-step wizards).