Stable

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, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

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)} />
      <SecondaryButton onClick={() => setOpen(true)}>Show overlay</SecondaryButton>
    </>
  );
};

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

Props

Prop	Type	Default	Description
`visible`	boolean	`false`	Whether the overlay is visible.
`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

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