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.


npm install @nib-components/overlay


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

Interactive demo



visiblebooleanfalseWhether the overlay is visible.
modestringdarkWhether the overlay is light or dark. Either light or dark.
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.


Dark overlay

Overlay component comes in two modes, light and dark. If the content you wish to display above the overlay is going to have a light background, then you should use the dark mode for increased contrast.

Light overlay

If your are planning to use a dark overlaid element of content, you should use the light mode for your overlay to increase the contrast and draw more attention to the desired content.

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.


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.