Overlay

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

Also known as: Popover
Salt package@salt-ds/core
Available since1.24.0
CodeOpens in a new tab

Using the component

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).

OverlayHeader names OverlayPanel using its header and preheader, and describes it using its description, so you don't need to set aria-labelledby or aria-describedby manually.

When to use

  • 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 will only dismiss after user interaction.

When not to use

  • 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.

Best practices

  1. Keep OverlayHeader, OverlayPanelContent and OverlayFooter as direct children of OverlayPanel so their spacing and scrolling behavior apply correctly.

Import

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

Props

Overlay

OverlayPanel

OverlayHeader

OverlayPanelContent

OverlayFooter

OverlayPanelCloseButton