Also known as

Available since

Overlay reveals supplementary content when the user clicks a UI trigger element. It remains active and open until the user dismisses it. It can contain interactive and focusable elements, such as buttons and links.

Interaction with the content in an overlay is typically constrained, as richer interactions/workflows should occur within a separate UI mechanism (such as a new page, Dialog or Drawer).

  • To expose interactive and essential elements within a tooltip to carry out in-context tasks.
  • For filter or dropdown panels that overlay content.
  • When acknowledgement on overlay content is needed. An overlay only dismissess after user interaction.
  • To notify and present critical information that requires immediate action from the user. Instead, use Dialog.
  • To provide a non-focusable and informative hint. Instead, use Tooltip.
  1. To allow screen readers to correctly identify overlay's trigger and its coresponding panel, define an id and pass the prop id="YOUR-OVERLAY-ID" to Overlay component.
  2. To allow screen readers to correctly identify OverlayPanel's content title and description respectively, add the prop id="YOUR-OVERLAY-ID-header" to your content header or title, and prop id="YOUR-OVERLAY-ID-content" to your content description.

To import Overlay and related components from the core Salt package, use: