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.
Loading...
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 className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop slot# | Description and type Type: string | Default value |
Prop style# | Description and type Type: string | Default value |
Prop title# | Description and type Type: string | Default value |
Prop dir# | Description and type Type: string | Default value |
Prop prefix# | Description and type Type: string | Default value |
Prop rel# | Description and type Type: string | Default value |
Prop property# | Description and type Type: string | Default value |
Prop accessKey# | Description and type Type: string | Default value |
Prop draggable# | Description and type Type: string | Default value |
Prop lang# | Description and type Type: string | Default value |
Prop translate# | Description and type Type: string | Default value |
Prop id# | Description and type Type: string | Default value |
Prop role# | Description and type Type: string | Default value |
Prop contentEditable# | Description and type Type: string | Default value |
Prop inputMode# | Description and type Type: string | Default value |
Prop nonce# | Description and type Type: string | Default value |
Prop tabIndex# | Description and type Type: string | Default value |
Prop onKeyDown# | Description and type Type: string | Default value |
Prop onKeyUp# | Description and type Type: string | Default value |
Prop onKeyPress# | Description and type Type: string | Default value |
Prop color# | Description and type Type: string | Default value |
Prop content# | Description and type Type: string | Default value |
Prop aria-live# | Description and type Type: string | Default value |
Prop onClick# | Description and type Type: string | Default value |
Prop defaultChecked# | Description and type Type: string | Default value |
Prop defaultValue# | Description and type Type: string | Default value |
Prop suppressContentEditableWarning# | Description and type Type: string | Default value |
Prop suppressHydrationWarning# | Description and type Type: string | Default value |
Prop autoFocus# | Description and type Type: string | Default value |
Prop contextMenu# | Description and type Type: string | Default value |
Prop spellCheck# | Description and type Type: string | Default value |
Prop radioGroup# | Description and type Type: string | Default value |
Prop about# | Description and type Type: string | Default value |
Prop datatype# | Description and type Type: string | Default value |
Prop inlist# | Description and type Type: string | Default value |
Prop resource# | Description and type Type: string | Default value |
Prop rev# | Description and type Type: string | Default value |
Prop typeof# | Description and type Type: string | Default value |
Prop vocab# | Description and type Type: string | Default value |
Prop autoCapitalize# | Description and type Type: string | Default value |
Prop autoCorrect# | Description and type Type: string | Default value |
Prop autoSave# | Description and type Type: string | Default value |
Prop itemProp# | Description and type Type: string | Default value |
Prop itemScope# | Description and type Type: string | Default value |
Prop itemType# | Description and type Type: string | Default value |
Prop itemID# | Description and type Type: string | Default value |
Prop itemRef# | Description and type Type: string | Default value |
Prop results# | Description and type Type: string | Default value |
Prop security# | Description and type Type: string | Default value |
Prop unselectable# | Description and type Type: string | Default value |
Prop is# | Description and type Type: string | Default value |
Prop aria-activedescendant# | Description and type Type: string | Default value |
Prop aria-atomic# | Description and type Type: string | Default value |
Prop aria-autocomplete# | Description and type Type: string | Default value |
Prop aria-braillelabel# | Description and type Type: string | Default value |
Prop aria-brailleroledescription# | Description and type Type: string | Default value |
Prop aria-busy# | Description and type Type: string | Default value |
Prop aria-checked# | Description and type Type: string | Default value |
Prop aria-colcount# | Description and type Type: string | Default value |
Prop aria-colindex# | Description and type Type: string | Default value |
Prop aria-colindextext# | Description and type Type: string | Default value |
Prop aria-colspan# | Description and type Type: string | Default value |
Prop aria-controls# | Description and type Type: string | Default value |
Prop aria-current# | Description and type Type: string | Default value |
Prop aria-describedby# | Description and type Type: string | Default value |
Prop aria-description# | Description and type Type: string | Default value |
Prop aria-details# | Description and type Type: string | Default value |
Prop aria-disabled# | Description and type Type: string | Default value |
Prop aria-dropeffect# | Description and type Type: string | Default value |
Prop aria-errormessage# | Description and type Type: string | Default value |
Prop aria-expanded# | Description and type Type: string | Default value |
Prop aria-flowto# | Description and type Type: string | Default value |
Prop aria-grabbed# | Description and type Type: string | Default value |
Prop aria-haspopup# | Description and type Type: string | Default value |
Prop aria-invalid# | Description and type Type: string | Default value |
Prop aria-keyshortcuts# | Description and type Type: string | Default value |
Prop aria-labelledby# | Description and type Type: string | Default value |
Prop aria-level# | Description and type Type: string | Default value |
Prop aria-modal# | Description and type Type: string | Default value |
Prop aria-multiline# | Description and type Type: string | Default value |
Prop aria-multiselectable# | Description and type Type: string | Default value |
Prop aria-orientation# | Description and type Type: string | Default value |
Prop aria-owns# | Description and type Type: string | Default value |
Prop aria-placeholder# | Description and type Type: string | Default value |
Prop aria-posinset# | Description and type Type: string | Default value |
Prop aria-pressed# | Description and type Type: string | Default value |
Prop aria-readonly# | Description and type Type: string | Default value |
Prop aria-relevant# | Description and type Type: string | Default value |
Prop aria-required# | Description and type Type: string | Default value |
Prop aria-roledescription# | Description and type Type: string | Default value |
Prop aria-rowcount# | Description and type Type: string | Default value |
Prop aria-rowindex# | Description and type Type: string | Default value |
Prop aria-rowindextext# | Description and type Type: string | Default value |
Prop aria-rowspan# | Description and type Type: string | Default value |
Prop aria-selected# | Description and type Type: string | Default value |
Prop aria-setsize# | Description and type Type: string | Default value |
Prop aria-sort# | Description and type Type: string | Default value |
Prop aria-valuemax# | Description and type Type: string | Default value |
Prop aria-valuemin# | Description and type Type: string | Default value |
Prop aria-valuenow# | Description and type Type: string | Default value |
Prop aria-valuetext# | Description and type Type: string | Default value |
Prop dangerouslySetInnerHTML# | Description and type Type: string | Default value |
Prop onCopy# | Description and type Type: string | Default value |
Prop onCopyCapture# | Description and type Type: string | Default value |
Prop onCut# | Description and type Type: string | Default value |
Prop onCutCapture# | Description and type Type: string | Default value |
Prop onPaste# | Description and type Type: string | Default value |
Prop onPasteCapture# | Description and type Type: string | Default value |
Prop onCompositionEnd# | Description and type Type: string | Default value |
Prop onCompositionEndCapture# | Description and type Type: string | Default value |
Prop onCompositionStart# | Description and type Type: string | Default value |
Prop onCompositionStartCapture# | Description and type Type: string | Default value |
Prop onCompositionUpdate# | Description and type Type: string | Default value |
Prop onCompositionUpdateCapture# | Description and type Type: string | Default value |
Prop onFocus# | Description and type Type: string | Default value |
Prop onFocusCapture# | Description and type Type: string | Default value |
Prop onBlur# | Description and type Type: string | Default value |
Prop onBlurCapture# | Description and type Type: string | Default value |
Prop onChange# | Description and type Type: string | Default value |
Prop onChangeCapture# | Description and type Type: string | Default value |
Prop onBeforeInput# | Description and type Type: string | Default value |
Prop onBeforeInputCapture# | Description and type Type: string | Default value |
Prop onInput# | Description and type Type: string | Default value |
Prop onInputCapture# | Description and type Type: string | Default value |
Prop onReset# | Description and type Type: string | Default value |
Prop onResetCapture# | Description and type Type: string | Default value |
Prop onSubmit# | Description and type Type: string | Default value |
Prop onSubmitCapture# | Description and type Type: string | Default value |
Prop onInvalid# | Description and type Type: string | Default value |
Prop onInvalidCapture# | Description and type Type: string | Default value |
Prop onLoad# | Description and type Type: string | Default value |
Prop onLoadCapture# | Description and type Type: string | Default value |
Prop onError# | Description and type Type: string | Default value |
Prop onErrorCapture# | Description and type Type: string | Default value |
Prop onKeyDownCapture# | Description and type Type: string | Default value |
Prop onKeyPressCapture# | Description and type Type: string | Default value |
Prop onKeyUpCapture# | Description and type Type: string | Default value |
Prop onAbort# | Description and type Type: string | Default value |
Prop onAbortCapture# | Description and type Type: string | Default value |
Prop onCanPlay# | Description and type Type: string | Default value |
Prop onCanPlayCapture# | Description and type Type: string | Default value |
Prop onCanPlayThrough# | Description and type Type: string | Default value |
Prop onCanPlayThroughCapture# | Description and type Type: string | Default value |
Prop onDurationChange# | Description and type Type: string | Default value |
Prop onDurationChangeCapture# | Description and type Type: string | Default value |
Prop onEmptied# | Description and type Type: string | Default value |
Prop onEmptiedCapture# | Description and type Type: string | Default value |
Prop onEncrypted# | Description and type Type: string | Default value |
Prop onEncryptedCapture# | Description and type Type: string | Default value |
Prop onEnded# | Description and type Type: string | Default value |
Prop onEndedCapture# | Description and type Type: string | Default value |
Prop onLoadedData# | Description and type Type: string | Default value |
Prop onLoadedDataCapture# | Description and type Type: string | Default value |
Prop onLoadedMetadata# | Description and type Type: string | Default value |
Prop onLoadedMetadataCapture# | Description and type Type: string | Default value |
Prop onLoadStart# | Description and type Type: string | Default value |
Prop onLoadStartCapture# | Description and type Type: string | Default value |
Prop onPause# | Description and type Type: string | Default value |
Prop onPauseCapture# | Description and type Type: string | Default value |
Prop onPlay# | Description and type Type: string | Default value |
Prop onPlayCapture# | Description and type Type: string | Default value |
Prop onPlaying# | Description and type Type: string | Default value |
Prop onPlayingCapture# | Description and type Type: string | Default value |
Prop onProgress# | Description and type Type: string | Default value |
Prop onProgressCapture# | Description and type Type: string | Default value |
Prop onRateChange# | Description and type Type: string | Default value |
Prop onRateChangeCapture# | Description and type Type: string | Default value |
Prop onResize# | Description and type Type: string | Default value |
Prop onResizeCapture# | Description and type Type: string | Default value |
Prop onSeeked# | Description and type Type: string | Default value |
Prop onSeekedCapture# | Description and type Type: string | Default value |
Prop onSeeking# | Description and type Type: string | Default value |
Prop onSeekingCapture# | Description and type Type: string | Default value |
Prop onStalled# | Description and type Type: string | Default value |
Prop onStalledCapture# | Description and type Type: string | Default value |
Prop onSuspend# | Description and type Type: string | Default value |
Prop onSuspendCapture# | Description and type Type: string | Default value |
Prop onTimeUpdate# | Description and type Type: string | Default value |
Prop onTimeUpdateCapture# | Description and type Type: string | Default value |
Prop onVolumeChange# | Description and type Type: string | Default value |
Prop onVolumeChangeCapture# | Description and type Type: string | Default value |
Prop onWaiting# | Description and type Type: string | Default value |
Prop onWaitingCapture# | Description and type Type: string | Default value |
Prop onAuxClick# | Description and type Type: string | Default value |
Prop onAuxClickCapture# | Description and type Type: string | Default value |
Prop onClickCapture# | Description and type Type: string | Default value |
Prop onContextMenu# | Description and type Type: string | Default value |
Prop onContextMenuCapture# | Description and type Type: string | Default value |
Prop onDoubleClick# | Description and type Type: string | Default value |
Prop onDoubleClickCapture# | Description and type Type: string | Default value |
Prop onDrag# | Description and type Type: string | Default value |
Prop onDragCapture# | Description and type Type: string | Default value |
Prop onDragEnd# | Description and type Type: string | Default value |
Prop onDragEndCapture# | Description and type Type: string | Default value |
Prop onDragEnter# | Description and type Type: string | Default value |
Prop onDragEnterCapture# | Description and type Type: string | Default value |
Prop onDragExit# | Description and type Type: string | Default value |
Prop onDragExitCapture# | Description and type Type: string | Default value |
Prop onDragLeave# | Description and type Type: string | Default value |
Prop onDragLeaveCapture# | Description and type Type: string | Default value |
Prop onDragOver# | Description and type Type: string | Default value |
Prop onDragOverCapture# | Description and type Type: string | Default value |
Prop onDragStart# | Description and type Type: string | Default value |
Prop onDragStartCapture# | Description and type Type: string | Default value |
Prop onDrop# | Description and type Type: string | Default value |
Prop onDropCapture# | Description and type Type: string | Default value |
Prop onMouseDown# | Description and type Type: string | Default value |
Prop onMouseDownCapture# | Description and type Type: string | Default value |
Prop onMouseEnter# | Description and type Type: string | Default value |
Prop onMouseLeave# | Description and type Type: string | Default value |
Prop onMouseMove# | Description and type Type: string | Default value |
Prop onMouseMoveCapture# | Description and type Type: string | Default value |
Prop onMouseOut# | Description and type Type: string | Default value |
Prop onMouseOutCapture# | Description and type Type: string | Default value |
Prop onMouseOver# | Description and type Type: string | Default value |
Prop onMouseOverCapture# | Description and type Type: string | Default value |
Prop onMouseUp# | Description and type Type: string | Default value |
Prop onMouseUpCapture# | Description and type Type: string | Default value |
Prop onSelect# | Description and type Type: string | Default value |
Prop onSelectCapture# | Description and type Type: string | Default value |
Prop onTouchCancel# | Description and type Type: string | Default value |
Prop onTouchCancelCapture# | Description and type Type: string | Default value |
Prop onTouchEnd# | Description and type Type: string | Default value |
Prop onTouchEndCapture# | Description and type Type: string | Default value |
Prop onTouchMove# | Description and type Type: string | Default value |
Prop onTouchMoveCapture# | Description and type Type: string | Default value |
Prop onTouchStart# | Description and type Type: string | Default value |
Prop onTouchStartCapture# | Description and type Type: string | Default value |
Prop onPointerDown# | Description and type Type: string | Default value |
Prop onPointerDownCapture# | Description and type Type: string | Default value |
Prop onPointerMove# | Description and type Type: string | Default value |
Prop onPointerMoveCapture# | Description and type Type: string | Default value |
Prop onPointerUp# | Description and type Type: string | Default value |
Prop onPointerUpCapture# | Description and type Type: string | Default value |
Prop onPointerCancel# | Description and type Type: string | Default value |
Prop onPointerCancelCapture# | Description and type Type: string | Default value |
Prop onPointerEnter# | Description and type Type: string | Default value |
Prop onPointerLeave# | Description and type Type: string | Default value |
Prop onPointerOver# | Description and type Type: string | Default value |
Prop onPointerOverCapture# | Description and type Type: string | Default value |
Prop onPointerOut# | Description and type Type: string | Default value |
Prop onPointerOutCapture# | Description and type Type: string | Default value |
Prop onGotPointerCapture# | Description and type Type: string | Default value |
Prop onGotPointerCaptureCapture# | Description and type Type: string | Default value |
Prop onLostPointerCapture# | Description and type Type: string | Default value |
Prop onLostPointerCaptureCapture# | Description and type Type: string | Default value |
Prop onScroll# | Description and type Type: string | Default value |
Prop onScrollCapture# | Description and type Type: string | Default value |
Prop onWheel# | Description and type Type: string | Default value |
Prop onWheelCapture# | Description and type Type: string | Default value |
Prop onAnimationStart# | Description and type Type: string | Default value |
Prop onAnimationStartCapture# | Description and type Type: string | Default value |
Prop onAnimationEnd# | Description and type Type: string | Default value |
Prop onAnimationEndCapture# | Description and type Type: string | Default value |
Prop onAnimationIteration# | Description and type Type: string | Default value |
Prop onAnimationIterationCapture# | Description and type Type: string | Default value |
Prop onTransitionEnd# | Description and type Type: string | Default value |
Prop onTransitionEndCapture# | Description and type Type: string | 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 |