Dimmer
An overlay that darkens the background content to focus the user's attention on another specific element or interaction, such as a Modal or Side Panel.
Displaying
The main goal of using the Dimmer is to draw attention to the content displayed above it. The Dimmer doesn't appear alone. In terms of z-index, the Dimmer is layered between the entire application and the content.
![layers](/assets/images/layers-74537ad4e431ae6cd75accc9e63fa03c.png)
Usage guidelines
Dialog
A temporary, focused window that overlays the main content. Often used to prompt user input or present important information that requires interaction, such as confirmation or error messages.
![layers](/assets/images/Hero-ae4bd8b56e7311986ab0242b9fb967f6.png)
Side Panel
Appears alongside the main content and is typically related to supporting actions, navigation, settings, or displaying supplementary information relevant to the current context or user task.
![layers](/assets/images/Hero-8810b0494e45c7bbe084e002a21c1d4d.png)