Layer

View source on GitHub

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:

Web:

iOS:

Android:

A11y:

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.

function Example() {

  const [showLayer, setShowLayer] = React.useState(false);

  return (
    <React.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="white" 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>
      )}
    </React.Fragment>
  );
}

function Example() {

  const [showLayer, setShowLayer] = React.useState(false);

  return (
    <React.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="white" 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>
      )}
    </React.Fragment>
  );
}

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.

function zIndexExample() {
  const [showLayer, setShowLayer] = React.useState(false);
  const HEADER_ZINDEX = new FixedZIndex(100);
  // Results in a zIndex of 101
  const zIndex = new CompositeZIndex([HEADER_ZINDEX]);

  return (
    <React.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="white" 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>
      )}
    </React.Fragment>
  );
}

function zIndexExample() {
  const [showLayer, setShowLayer] = React.useState(false);
  const HEADER_ZINDEX = new FixedZIndex(100);
  // Results in a zIndex of 101
  const zIndex = new CompositeZIndex([HEADER_ZINDEX]);

  return (
    <React.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="white" 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>
      )}
    </React.Fragment>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub