IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Code HelpersIconUiExpandCollapseDown
Design AssetsIconUiExpandCollapseDown

Z-Index & Elevation

When adding layers to an interface, this is the way to go—just pay attention to the stack order.

Web
React Native
Android
Apple

Z-Index

Use these variables for the content area of your interface.

NameValueVariable
Content 1100var(--zindex-1)
Content 2200var(--zindex-2)
Content 3300var(--zindex-3)
Content 4400var(--zindex-4)
Content 5500var(--zindex-5)
Content 6600var(--zindex-6)
Content 7700var(--zindex-7)
Content 8800var(--zindex-8)
Content 9900var(--zindex-9)

Elevation

Use these variables for expected interface elements like Modals, Toasts and Notices.

NameValueVariable
Tooltip1000var(--elevation-tooltip)
Popover1000var(--elevation-popover)
Notice1100var(--elevation-notice)
Action Bar1200var(--elevation-action-bar)
System Notice2000var(--elevation-system-notice)
Nav3000var(--elevation-nav)
Nav 13100var(--elevation-nav-1)
Nav 23200var(--elevation-nav-2)
Nav 33300var(--elevation-nav-3)
Prompt Scrim4000var(--elevation-prompt-scrim)
Prompt4100var(--elevation-prompt)
Modal Container5000var(--elevation-modal-container)
Overlay Container5000var(--elevation-overlay-container)
Modal Scrim5100var(--elevation-modal-scrim)
Overlay Scrim5100var(--elevation-overlay-scrim)
Modal5200var(--elevation-modal)
Overlay5200var(--elevation-overlay)
Modal 15310var(--elevation-modal-1)
Overlay 15310var(--elevation-overlay-1)
Modal 25320var(--elevation-modal-2)
Overlay 25320var(--elevation-overlay-2)
Modal 35330var(--elevation-modal-3)
Overlay 35330var(--elevation-overlay-3)
Toast6000var(--elevation-toast)
Alert Container6000var(--elevation-alert-container)
Alert Scrim6100var(--elevation-alert-scrim)
Alert6200var(--elevation-alert)
System Status7000var(--elevation-system-status)