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.

GitHub·Storybook·Playroom·Figma

Installation

bash

npm install @nib-components/overlay

Usage

jsx

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

Interactive demo

jsx

() => {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <>
      <Overlay visible={isOpen} onClose={() => setOpen(false)} mode="dark" />
      <SecondaryButton onClick={() => setOpen(true)}>Show overlay</SecondaryButton>
    </>
  );
};

() => {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <>
      <Overlay visible={isOpen} onClose={() => setOpen(false)} mode="dark" />
      <SecondaryButton onClick={() => setOpen(true)}>Show overlay</SecondaryButton>
    </>
  );
};

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.

Modal

Edit this page