Skip to main content
const zIndex: {
  select: {
     list: {
        value: "{zIndex.popup}";
     };
  };
  modal: {
     overlay: {
        value: "{zIndex.scrim}";
     };
     dialog: {
        value: "{zIndex.floating}";
     };
  };
  base: {
     value: 0;
     unit: "none";
  };
  raised: {
     value: 1;
     unit: "none";
  };
  popup: {
     value: 200;
     unit: "none";
  };
  scrim: {
     value: 400;
     unit: "none";
  };
  floating: {
     value: 500;
     unit: "none";
  };
};
All the z-index tokens.

Type declaration

NameTypeDefault value
select{ list: { value: "{zIndex.popup}"; }; }-
select.list{ value: "{zIndex.popup}"; }-
select.list.value"{zIndex.popup}""{zIndex.popup}"
modal{ overlay: { value: "{zIndex.scrim}"; }; dialog: { value: "{zIndex.floating}"; }; }-
modal.overlay{ value: "{zIndex.scrim}"; }-
modal.overlay.value"{zIndex.scrim}""{zIndex.scrim}"
modal.dialog{ value: "{zIndex.floating}"; }-
modal.dialog.value"{zIndex.floating}""{zIndex.floating}"
base{ value: 0; unit: "none"; }-
base.value00
base.unit"none""none"
raised{ value: 1; unit: "none"; }-
raised.value11
raised.unit"none""none"
popup{ value: 200; unit: "none"; }-
popup.value200200
popup.unit"none""none"
scrim{ value: 400; unit: "none"; }-
scrim.value400400
scrim.unit"none""none"
floating{ value: 500; unit: "none"; }-
floating.value500500
floating.unit"none""none"