Overlay Panels
Reveals supplementary UI, such as a filter, when the user interacts with its trigger. The contents of the panel are customizable.
Overview
Use overlay panels to display additional features or information, such as filters and map legends. To keep this component flexible, there is no formal API for data handling. Developers should handle data directly using Vue.
There are two variants of overlay panels: default and map. The map variant has unique styling and should only be used for map products. Use the default variant for all other cases.


Design and Layout
Users can close overlay panels by toggling the trigger (e.g., clicking a button), pressing the 'Esc' key, or by clicking outside the panel.
Anatomy
Both default and map variants offer the same three slots: default
, footer
, and trigger
.

Element | Description |
---|---|
1. Overlay Panel | Overlay panel component |
2. Trigger Slot | Trigger slot, commonly a button |
3. Default Slot | Free-form slot for content or controls |
4. Footer Slot | Footer slot for actions or content that need to be positioned at the bottom of the panel |
Using Overlay Panels for Filters
Place overlay panels in the actions
slot of the pagination component to position them above a data table or list to be filtered. Use a small button for the trigger
slot and tags to display active filters.

Dos and Don'ts

- Don't use overlay panels for filtering large tables where users modify their filters frequently. Instead, use a filter row.

- Don't place other overlay components, such as selects or multi-selects inside of an overlay panel.
Installation
Props
No records available |