The Overlay component is a versatile UI element used to display content in front of other content, typically used for modals, dialog boxes, and notifications.It's designed to focus user attention and provide additional interaction layers without navigating away from the current page.
Overlay ussed to display a Modal as filter CS+
[Explain when to use the component in the table below]
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Ovelay |
Display content in front of other content nad support modals, dialog boxes, notifications and loading. |
Cover all screen or can cover all component if the action apply to that component only. |
All |
Anatomy
Structure
|
1. Content |
|
content |
This is only a layers of the overlay with the specific opacity |
Sizes and Spaces
|
The overlay component will always have full width and height on the screen or the component.
|
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Type |
dark white |
The type can be chisen according with the need of the project |
Guidelines
|
|