OverlayPanelIn Astro, side panels are used to show details and present modal interactions.

Design

Implementation

Required Components

• Overlay Provider

Best PracticesOverlayPanel should:

• Be opened on clicking a ListItem to display more information about the item

• Cover the page behind it

OverlayPanel should not:

• Push the content behind it when it opens

Accessibility

WAI-ARIA: Dialog(Modal)

LabellingThe trigger button should have a correct button aria-label. A panel should have a close button that is labeled properly

Default

OverlayPanel should be used for progressive disclosure of additional contextual information and actions.

Open Panel

Close PanelChildren render here.