import { Meta } from "@storybook/addon-docs"; import { useTheme, ThemeProvider } from "@appsmith/wds-theming"; import { TokenTable, StyledSquarePreview } from "@design-system/storybook";

<Meta title="WDS/Theme/Tokens/ZIndex" />

ZIndex

Z-index design token is a numerical value used to determine the layering of elements in a UI. By assigning different z-index values to elements, developers can control which elements appear on top of others. This can be useful in creating visual hierarchies, such as ensuring that navigation menus appear above other content on a page.

Tokens Table

export const ZIndex = () => { const { theme } = useTheme(); const { zIndex } = theme; return ( <ThemeProvider theme={theme}> <TokenTable prefix="z-index" tokens={zIndex}> {(cssVar) => ( <StyledSquarePreview style={{ zIndex: cssVar, }} /> )} </TokenTable> </ThemeProvider> ); };

<ZIndex />