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

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

Variants

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
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Fragment>
        <Button onClick={() => setShowLayer(!showLayer)} text="Show Layer" />
        {showLayer && (
          <Layer>
            <Box
              alignItems="center"
              bottom
              color="darkWash"
              display="flex"
              justifyContent="center"
              left
              position="fixed"
              right
              top
            >
              <Box alignItems="center" color="light" display="flex" padding={3}>
                <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
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Fragment>
        <Button onClick={() => setShowLayer(!showLayer)} text="Show Layer" />
        {showLayer && (
          <Layer zIndex={zIndex}>
            <Box
              alignItems="center"
              bottom
              color="darkWash"
              display="flex"
              justifyContent="center"
              left
              position="fixed"
              right
              top
            >
              <Box alignItems="center" color="light" display="flex" padding={3}>
                <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