Z-Index

Z-index controls the stacking order of elements on a page. In the Tendoo Design System, we use tokenized z-index values to maintain a predictable and manageable layering structure across all components and layouts.

Using consistent z-index tokens helps prevent unexpected overlapping, ensures accessibility, and makes it easier to manage complex UI layers like tooltips, drawers, modals, and toasts.

Z-Index Tokens

// z-index.tokens.ts
export const zIndex = {
  base: 0,
  behind: -1,
  header: 10,
  dropdown: 20,
  overlay: 30,
  modal: 40,
  toast: 50,
  max: 999,
};

Usage Guidelines

• Use the lowest z-index necessary for the desired effect.
• Avoid arbitrary values (like z-9999) — use token names to improve clarity and maintenance.
• Use z-index.max only as a last resort for system-level emergency overrides.
• Always pair high z-index layers with appropriate aria roles and focus management.

Example

<div className="fixed top-0 left-0 w-full z-header bg-white shadow-sm">
  Sticky Header
</div>

<div className="absolute z-modal bg-surface p-md rounded-md">
  Modal Content
</div>

Layering Reference

-1 → behind (background elements)
 0 → base (default stacking)
10 → headers and sticky nav
20 → dropdowns, tooltips
30 → overlays, drawers
40 → modals
50 → toasts, notifications

Related

• Elevation
• Motion
• Accessibility

Z-index layering should be simple and semantic. Use Tendoo’s tokenized approach to avoid stacking chaos and maintain a clean, accessible UI structure.