Overlay

Overlay separates foreground from the background content.

Background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample

Foreground sample content

import { Overlay } from "@nulogy/components";

<Text>Background content sample</Text>

<Overlay>
  <Text>Foreground sample content</Text>
</Overlay>

Themes

Overlay by default assigns light theme but dark theme is also available.

Background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample

Foreground sample content

import { Overlay } from "@nulogy/components";
<Text>Background content sample</Text>
<Overlay dark>
  <Card>
    <Text>Foreground sample content</Text>
  </Card>
</Overlay>

Props

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

NameTypeDefaultDescription

dark

Boolean

false

Controls the theming

Related components