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.
Default 0
Sticky 100
Tooltip 300
Dropdown 500
Drawer 1300
Alert 1400
Dialog 1500

Storybook

Storybook - Layer Documentation

Figma Demo

Layer/Z-Index Values

Our design tokens define the following layer values:

  • Default - z (0): The base layer for most content. Elements at this level are rendered at the natural stacking context.
  • Sticky - z-sticky (100): Used for sticky headers and footers, ensuring they remain visible during scrolling.
  • Tooltip - z-tooltip (300): Used for tooltips, ensuring they appear above standard content but below more prominent overlays.
  • Drawer - z-drawer (400): For off-canvas drawers, providing higher precedence than tooltips to remain visible during interactions.
  • Dropdown - z-dropdown (500): Applied to dropdown menus, ensuring they display above drawers and tooltips.
  • Alert - z-alert (1400): Used for alert messages, placing them above all standard interactive elements to capture immediate attention.
  • Modal - z-modal (1500): The highest standard layer, ensuring modals overlay all other components for focused user interactions.