Overlay
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
npm install @nib-components/overlay
Usage
import Overlay from '@nib-components/overlay';
Interactive demo
Props
Prop | Type | Default | Description |
---|---|---|---|
visible | boolean | false | Whether the overlay is visible. |
mode | string | dark | Whether the overlay is light or dark. Either light or dark . |
closeOnEsc | boolean | true | Whether the overlay should call the onClose handler when the user has pressed the ESC key. |
closeOnClick | boolean | true | Whether the overlay should call the onClose handler when the user has clicked on the overlay. |
onClose | function | Handle the close events. |
Design
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.
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.