Overlay

Maintainer:
Vladeeg
GitHub
visible
background
import {Overlay} from '@gravity-ui/uikit';

The Overlay component renders an overlay over the parent element with the relative position, i.e., the parent element must have position set to relative. For example, it can be used to preserve the desired layout while loading data.

import {Box, Overlay, Loader} from '@gravity-ui/uikit';

<Box position="relative">
  <div>Some content to hide under overlay</div>
  <Overlay visible={loading}>
    <Loader />
  </Overlay>
</Box>;

Appearance

Background

You can use base or float background colors.

Properties

NameDescriptionTypeDefault
classNameCSS class name of the root elementstring
visibleOverlay visibility statebooleanfalse
backgroundOverlay background style"base" "float"base
childrenContent (usually, a Loader component)React.ReactNode