Overlay mask
EuiOverlayMask is simply a display component used to obscure the main content to bring attention to its children or other content. It is best used in conjunction with hyper-focus content areas like modals and flyouts.
There are many considerations to make before choosing to use an overlay. At the very least, you must provide a visible button to close the overlay. You can also nest an EuiFocusTrap to handle closing the overlay.
Masks with header
Managing z-index levels of multiple portal-positioned components and their different contexts is complicated from within the library. EuiOverlayMask gives you control over whether it should appear below or above an EuiHeader by providing the headerZindexLocation prop. By default this is set to "above" for common cases like with EuiModal where the header should be obscured. However, a component like EuiFlyout which utilizes the overlay mask but should keep the header visible should use "below" (which is its default value).
Props
EuiOverlayMask
Prop | Description and type | Default value |
|---|---|---|
Prop children# | Description and type ReactNode to render as this component's content ReactNode | Default value |
Prop headerZindexLocation# | Description and type Should the mask visually sit above or below the EuiHeader (controlled by z-index) "above" | "below" | Default value above |
Prop maskRef# | Description and type React ref to be passed to the wrapping container Ref<HTMLDivElement> | MutableRefObject<HTMLDivElement> | Default value |
Prop hasAnimation# | Description and type If enabled, the mask will have a fade in animation. boolean | Default value true |