Search Kaotypr Design System

Search tokens, pages and quick actions

TokensZ-index

Z-index

Locked at the system level. Overriding breaks layering across products in the family. Overlay=50, modal=popover=60, tooltip=70, toast=80.

Cross-product layering

Z-index values are locked across every Kaotypr product so layered surfaces (modal in app A, tooltip in app B) compose predictably. Overriding any of these is a bug.

  • z-sticky = 30
  • z-dropdown = 40
  • z-overlay = 50 (scrim sits below modal/popover)
  • z-modal = z-popover = 60
  • z-tooltip = 70
  • z-toast = 80 (always on top)
Locked

Locked tokens

8 tokens
--z-index-baseLocked

Light
0
z=0
--z-index-dropdownLocked

Light
40
z=40
--z-index-modalLocked

Light
60
z=60
--z-index-overlayLocked

Light
50
z=50
--z-index-popoverLocked

Light
60
z=60
--z-index-stickyLocked

Light
30
z=30
--z-index-toastLocked

Light
80
z=80
--z-index-tooltipLocked

Light
70
z=70