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.

Also known as: Popover

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

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

Key	Function
`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.

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

Key	Function
`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.

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

Key	Function
`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.