Overlay
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.
| Salt package | @salt-ds/core |
|---|---|
| Available since | 1.24.0 |
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 will only dismiss 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.
- To allow screen readers to correctly identify overlay's trigger and its corresponding panel, define an
idand pass the propid="YOUR-OVERLAY-ID"toOverlaycomponent. - To allow screen readers to correctly identify
OverlayPanel's content title and description respectively, add the propid="YOUR-OVERLAY-ID-header"to your content header or title, and propid="YOUR-OVERLAY-ID-content"to your content description.
To import Overlay and related components from the core Salt package, use:
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 will only dismiss 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.
- To allow screen readers to correctly identify overlay's trigger and its corresponding panel, define an
idand pass the propid="YOUR-OVERLAY-ID"toOverlaycomponent. - To allow screen readers to correctly identify
OverlayPanel's content title and description respectively, add the propid="YOUR-OVERLAY-ID-header"to your content header or title, and propid="YOUR-OVERLAY-ID-content"to your content description.
To import Overlay and related components from the core Salt package, use:
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 will only dismiss 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.
- To allow screen readers to correctly identify overlay's trigger and its corresponding panel, define an
idand pass the propid="YOUR-OVERLAY-ID"toOverlaycomponent. - To allow screen readers to correctly identify
OverlayPanel's content title and description respectively, add the propid="YOUR-OVERLAY-ID-header"to your content header or title, and propid="YOUR-OVERLAY-ID-content"to your content description.
To import Overlay and related components from the core Salt package, use: