Layer
In our design system, layers represent z-index values and are used to manage the stacking order of elements on the page, ensuring that components display correctly and interact predictably. By standardizing these values, we can create a consistent visual hierarchy and avoid conflicts that can lead to unintended overlaps or hidden elements.
Storybook
Storybook - Layer DocumentationFigma Demo
Layer/Z-Index Values
Our design tokens define the following layer values:
- Default (0): The base layer for most content. Elements at this level are rendered at the natural stacking context.
- Tooltip (300): Used for tooltips, ensuring they appear above standard content but below more prominent overlays.
- Drawer (400): For off-canvas drawers, providing higher precedence than tooltips to remain visible during interactions.
- Dropdown (500): Applied to dropdown menus, ensuring they display above drawers and tooltips.
- Alert (1400): Used for alert messages, placing them above all standard interactive elements to capture immediate attention.
- Modal (1500): The highest standard layer, ensuring modals overlay all other components for focused user interactions.