Backdrop
The Backdrop component is used to overlay a dimmed background across the screen, drawing attention to content in the foreground, such as modals, dialogs, or loading indicators. The backdrop signals that the background content is temporarily inaccessible.
The Backdrop component provides a clean and efficient way to overlay a backdrop layer to indicate that the background content is temporarily inactive or inaccessible. This component is primarily used in conjunction with modals, loading indicators, or popovers.
Function
The Backdrop component helps achieve the following functions:
- Modal Backdrop: Provides a visual overlay when a modal is open, dimming the background and focusing attention on the modal.
- Loading Indicator: Can be used with a loading spinner or indicator to notify users that content is being processed.
- Popover or Custom Select: Useful for making a popover or custom select component more noticeable by blocking interaction with the background.
Props
Props of the Fade component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
open* | bool | - | If true, the component is shown. |
children | node | - | The content of the component. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
component | elementType | - | The component used for the root node. Either a string to use an HTML element or a component. |
components | Root?: elementType | | The components used for each slot inside.Deprecated — Use the slots prop instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details. |
componentsProps | root?: object | | The extra props for the slot components. You can override the existing props or add new ones.Deprecated — Use the slotProps prop instead. This prop will be removed in v7. |
invisible | bool | false | If true, the backdrop is invisible, useful for popovers or custom selects. |
slotProps | root?: func | object, transition?: func | object | | The props used for each slot inside the component. |
slots | root?: elementType, transition?: elementType | | The components used for each slot inside. |
sx | Array<func | object | bool> | func | object | - | The system prop for defining system overrides and additional CSS styles. See the sx page for more details. |
TransitionComponent | elementType | Fade | The component used for the transition. Refer to the guide for component requirements. |
transitionDuration | number | appear?: number, enter?: number, exit?: number | - | Duration for the transition, in milliseconds. Specify a single timeout or individual times. |
Labeling
The Backdrop component provides a clear visual indication that content is temporarily inaccessible. It is typically used for displaying temporary UI elements, such as dialogs or loading indicators. It's important to ensure that the backdrop is not intrusive and is used in the appropriate context.
It is also essential to consider accessibility and usability when implementing a backdrop. Ensure that users can interact with the content behind the backdrop when it is dismissed or closed, and ensure proper keyboard and screen reader support.
Responsive Design
The Backdrop component can be easily integrated into responsive designs, ensuring that it adapts to different screen sizes and layouts. It should be used in a way that works well on mobile devices, tablets, and desktops. Consider the size of the overlay and how it impacts the user experience across devices.
You can adjust the backdrop's visibility, duration, and animation to suit different screen sizes and provide a smooth user experience on all devices.
