Overlay

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.

OverlayHeader 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.

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.

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.

Note: OverlayPanelCloseButton is deprecated. Use the prop actions within OverlayHeader instead.

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.

OverlayHeader 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.

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.

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.

Note: OverlayPanelCloseButton is deprecated. Use the prop actions within OverlayHeader instead.

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.

OverlayHeader 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.

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.

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.

Note: OverlayPanelCloseButton is deprecated. Use the prop actions within OverlayHeader instead.