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 Documentation

Figma 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.