Overlay

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:

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:

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: