Backdrop

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)

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

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

Anatomy

Shape

Description:

The backdrop is an element that will adapt to the screen in a fullsize form.

Color

Description:

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

Colors

Name	Applied as	Applied to
color-surface-dim-neutral-default	Background color	Backdrop
color-surface-dim-neutral-default	Background color	Backdrop

Accessibility

Backdrops can easily become accessibility barriers if not designed or implemented properly. The following guidelines help ensure compliance with WCAG 2.1 AA, good keyboard navigation, and compatibility with assistive technologies.

For Design

• Contrast and Visibility — Ensure backdrops provide sufficient contrast against the background (minimum 4.5:1).
• Avoid relying solely on colour or transparency to convey meaning.
• The backdrop itself should never handle focus or interactivity — these behaviours belong to the modal, drawer, or tooltip layered above it.

For Dev

To ensure that all backdrop variants meet accessibility standards across platforms, please follow the implementation checklist below. These recommendations align with WCAG 2.1 AA, support keyboard navigation, and are compatible with assistive technologies.

1. Focus management
   • Keep focus trapped within the backdroped component so users don’t navigate outside accidentally.
   • Return focus to the triggering element once the backdrop (or modal) is closed.
   • Focus must always remain within the active modal, drawer, or tooltip while the backdrop is visible.
2. Keyboard navigation
   • Ensure all interactive elements are reachable via Tab.
   • Allow users to close backdrops with the Esc key when appropriate.
   • The backdrop layer itself must not receive focus or contain interactive elements — these belong to the modal, drawer, or tooltip layered above it.
3. Screen Reader Support
   • Use appropriate ARIA roles, e.g. role="dialog" or role="alertdialog" for modals.
   • Apply aria-labelledby and aria-describedby to provide context when relevant.
   • Announce backdrops or dialogs when they appear (e.g. through live regions for alerts or notifications).
   • Assign aria-hidden="true" to the backdrop layer itself so it’s ignored by assistive technologies.
4. Motion sensitivity
   • Respect user preferences for reduced motion (prefers-reduced-motion media query).
   • Avoid excessive fade or scale animations that could cause discomfort.

Usage

Do

Guidance on how to use a component.

• 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

Guidance on what to avoid when using a component.

• 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).