Design Tokens for Mesh have just been released!
Skip to content

Overlay provides a full-screen, semi-transparent layer to block out the underlying page content, allowing you to direct the user's attention to a specific section of a UI. It is useful to draw attention to a unique, custom element placed on top of a page (e.g. a sidebar drawer). The Modal component utilises Overlay, and is preferred in most cases. You should not use this component to create your own modal design - use the Modal component instead.

Installation

bash
npm install @nib-components/overlay

Usage

jsx
import Overlay from '@nib-components/overlay';

Interactive demo

jsx

Props

PropTypeDefaultDescription
visiblebooleanfalseWhether the overlay is visible.
closeOnEscbooleantrueWhether the overlay should call the onClose handler when the user has pressed the ESC key.
closeOnClickbooleantrueWhether the overlay should call the onClose handler when the user has clicked on the overlay.
onClosefunctionHandle the close events.

Design

Closing interaction

Clicking on an overlay will trigger it to close. Be sure to also include a close mechanism in whatever focus-content you are using the overlay with - multiple close options allow for both accessibility needs and for users who are not familiar with the click-to-close pattern of an overlay.

Considerations

When closing an overlay, focus should be restored to the last-focused element. If using the Modal component this is done for you, but if you are building something custom using the overlay you'll need to implement your own focus management for accessibility best practice.