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.

Overlay Panel default
Overlay Panel default

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.

Overlay Panel Anatomy
ElementDescription
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.

Overlay Panel filter

Dos and Don'ts

Do
  • Do use overlay panels for tables that are commonly viewed without filtering or where one filter is sufficient. Use the filter component if there is a large number of options.
  • Do use overlay panels to display supplemental content in dense displays, such as maps. For inline, prefer Accordion
Don't
  • Don't use overlay panels for filtering large tables where users modify their filters frequently. Instead, use a filter row.
Don't

Installation

Props