Overlay

Overlay separates foreground from the background content and overlays the whole screen.

children


<Box borderRadius="medium" p="x3" bg="white">
  <Text>Foreground sample content</Text>
</Box>


<Box borderRadius="medium" p="x3" bg="white">
  <Text>Foreground sample content</Text>
</Box>

dark

import * as React from "react";
import { Overlay, Text, Box } from "@nulogy/components";

export default () => {
  return (
    <Overlay dark>
      <Box borderRadius="medium" p="x3" bg="white">
        <Text>Foreground sample content</Text>
      </Box>
    </Overlay>
  );
}

import * as React from "react";
import { Overlay, Text, Box } from "@nulogy/components";

export default () => {
  return (
    <Overlay dark>
      <Box borderRadius="medium" p="x3" bg="white">
        <Text>Foreground sample content</Text>
      </Box>
    </Overlay>
  );
}

Props

As an extension of Flex, Overlay accepts all of Flex's props in addition to the props listed below.

Name	Type	Default	Description
children	react node		Controls the theming.
dark	boolean		Controls the theming.

Overlay

Props

Related Components