Overlay

Also known as

Popover

Similar to

Contains

Available since
@salt-ds/core@1.24.0

Resources

Support

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.

Interactions

  • Users expose an overlay using a focusable UI element, such as a button. On button activation by either the Enter or Space keys, focus enters the overlay.
  • Users can close an overlay by a close button click or press, or clicking outside of the floating element. Users can also close an overlay by pressing Enter or Space when focus is on the close button.
  • The overlay's close button always receives focus before overlay content.

Keyboard interactions

KeyFunction
Tab
  • If focus is on close button, Tab moves focus through focusable content elements in the overlay.
  • If focus is on the last element in the overlay content, Tab wraps focus to the close button. Focus does not leave the overlay.
Shift + Tab
  • If focus is on close button, this action moves focus to last focusable content element in the overlay.
  • If focus is on the first element in the overlay content, this action wraps focus to the close button. Focus does not leave the overlay.
Enter / Space
  • If focus is on close button, this action closes the overlay. Focus returns to trigger element.
  • This action closes the overlay if a content element is configured to close the overlay when activated.
Escape
  • If focus is in the overlay content, Escape closes the overlay and returns focus to trigger element.

Previous Page

Navigation item

Next Page

Pagination