Layer

Layers allow you to render children outside the DOM hierarchy of the parent. It's a wrapper around React createPortal that lets you use it as a component. This is particularly useful for places you might have needed to use z-index to overlay the screen before.

also known as Portal, Overlay

Figma:

N/A

Responsive:

Ready

Adaptive:

N/A

A11y:

Ready

Props

Component props
Name	Type	Default
`children` Required	`React.Node`	-
`zIndex`	`Indexable`	-
	An object representing the z-index value of the Layer. See the z-index example for more details.

Accessibility

Ready

Server Rendering

Because creating a portal in Layer depends on DOM manipulation, if document is not present, such as in a server rendering environment, the children will not be rendered.

Overlaying Content

Child content will be rendered outside the DOM hierarchy for easy overlaying. Click to see an example.

import { Fragment, useState } from 'react';
import { Box, Button, IconButton, Layer, Text } from 'gestalt';

export default function Example() {
  const [showLayer, setShowLayer] = useState(false);

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Fragment>
        <Button text="Show Layer" onClick={() => setShowLayer(!showLayer)} />
        {showLayer && (
          <Layer>
            <Box
              color="darkWash"
              position="fixed"
              top
              left
              right
              bottom
              display="flex"
              alignItems="center"
              justifyContent="center"
            >
              <Box color="light" padding={3} display="flex" alignItems="center">
                <Text>Layer Content</Text>
                <Box marginStart={2}>
                  <IconButton
                    accessibilityLabel="Close"
                    icon="cancel"
                    onClick={() => setShowLayer(!showLayer)}
                  />
                </Box>
              </Box>
            </Box>
          </Layer>
        )}
      </Fragment>
    </Box>
  );
}

zIndex

The example below shows using a `FixedZIndex` for the header zIndex and a `CompositeZIndex` to stack the Layer on top of it. Visit our Z-Index documentation for more details on how to use these utility classes.

import { Fragment, useState } from 'react';
import {
  Box,
  Button,
  CompositeZIndex,
  FixedZIndex,
  IconButton,
  Layer,
  Text,
} from 'gestalt';

const HEADER_ZINDEX = new FixedZIndex(100);

export default function Example() {
  const [showLayer, setShowLayer] = useState(false);
  // Results in a zIndex of 101
  const zIndex = new CompositeZIndex([HEADER_ZINDEX]);

  return (
    <Box
      padding={8}
      height="100%"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Fragment>
        <Button text="Show Layer" onClick={() => setShowLayer(!showLayer)} />
        {showLayer && (
          <Layer zIndex={zIndex}>
            <Box
              color="darkWash"
              position="fixed"
              top
              left
              right
              bottom
              display="flex"
              alignItems="center"
              justifyContent="center"
            >
              <Box color="light" padding={3} display="flex" alignItems="center">
                <Text>Layer Content</Text>
                <Box marginStart={2}>
                  <IconButton
                    accessibilityLabel="Close"
                    icon="cancel"
                    onClick={() => setShowLayer(!showLayer)}
                  />
                </Box>
              </Box>
            </Box>
          </Layer>
        )}
      </Fragment>
    </Box>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

Edit page on GitHub

; Opens a new tab