The basic overlay component allows the user to expose and interact with supplemental information. The overlay remains persistent until the user dismisses it.

Use the placement prop to position overlay content to the top, bottom, left or right of the trigger element.

OverlayPanelCloseButton can be added as a child of the OverlayPanel component to render a close button in the top right corner of the OverlayPanel. You can pass the onClick prop like with any Button component to handle the close button click.

When overlay content extends beyond the set height, the content defaults to scroll. The close button remains sticky and accessible at all times.

With actions, users can decide if interacting with content in the overlay should close the overlay. This example shows how activating the Export button triggers the export function, closes the overlay, and returns focus to the trigger element.

OverlayHeader's update follows our standardized header for container components and app regions, and it can be added as a child of the OverlayPanel component to provide a structured header for overlay. The header includes a title and actions that follows our Header Block pattern. This approach is recommended over using the OverlayPanelCloseButton separately.

Note: This change is currently in Lab.

The basic overlay component allows the user to expose and interact with supplemental information. The overlay remains persistent until the user dismisses it.

Use the placement prop to position overlay content to the top, bottom, left or right of the trigger element.

OverlayPanelCloseButton can be added as a child of the OverlayPanel component to render a close button in the top right corner of the OverlayPanel. You can pass the onClick prop like with any Button component to handle the close button click.

When overlay content extends beyond the set height, the content defaults to scroll. The close button remains sticky and accessible at all times.

With actions, users can decide if interacting with content in the overlay should close the overlay. This example shows how activating the Export button triggers the export function, closes the overlay, and returns focus to the trigger element.

OverlayHeader's update follows our standardized header for container components and app regions, and it can be added as a child of the OverlayPanel component to provide a structured header for overlay. The header includes a title and actions that follows our Header Block pattern. This approach is recommended over using the OverlayPanelCloseButton separately.

Note: This change is currently in Lab.

The basic overlay component allows the user to expose and interact with supplemental information. The overlay remains persistent until the user dismisses it.

Use the placement prop to position overlay content to the top, bottom, left or right of the trigger element.

OverlayPanelCloseButton can be added as a child of the OverlayPanel component to render a close button in the top right corner of the OverlayPanel. You can pass the onClick prop like with any Button component to handle the close button click.

When overlay content extends beyond the set height, the content defaults to scroll. The close button remains sticky and accessible at all times.

With actions, users can decide if interacting with content in the overlay should close the overlay. This example shows how activating the Export button triggers the export function, closes the overlay, and returns focus to the trigger element.

OverlayHeader's update follows our standardized header for container components and app regions, and it can be added as a child of the OverlayPanel component to provide a structured header for overlay. The header includes a title and actions that follows our Header Block pattern. This approach is recommended over using the OverlayPanelCloseButton separately.

Note: This change is currently in Lab.