Overlay | iTwinUI

Overlays hide content from the user with a blur effect and loading indicator.

import * as React from 'react';
import { Overlay } from '@itwin/itwinui-react';

export default () => {
  return (
    <Overlay content={'loading...'} className='demo-overlay'>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </div>
    </Overlay>
  );
};

Typically the Overlay is displayed with either a linear or radial progress indicator, however the component can be customized to display different messages.

Customizable Overlay

import * as React from 'react';
import { Overlay, ProgressLinear } from '@itwin/itwinui-react';

export default () => {
  return (
    <Overlay.Wrapper className='demo-overlay'>
      <Overlay.Overlay>
        <ProgressLinear indeterminate={true} />
      </Overlay.Overlay>
      <Overlay.HiddenContent>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </Overlay.HiddenContent>
    </Overlay.Wrapper>
  );
};

Props

Prop	Description	Default
children	Page elements that are blurred by the Overlay. Will become blurred and inert. ReactNode
content	Content shown inside the Overlay, on top of the blurred content. Can be used to show a loading indicator. ReactNode
as	"symbol" \| "object" \| "div" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| ... 158 more ... \| FunctionComponent<...>