Filtering

Anatomy

Item	Element	Description
1	Header	Includes Filter as a title, optional description, and the close icon. Use the optional description to set the context or provide additional clarity for the filter.
2	Body	Contains the options or controls to apply the filter. This could include dropdowns, checkboxes, or search fields depending on the filter type.
3	Actions	The main actions required to apply or clear filters. Use clear action labels to guide the user, such as "Apply Filter", "Clear All", or "Reset to Default". Avoid ambiguous labels like "Submit" or "Confirm".
4	Overlay	An overlay may be used to dim the background content while a modal filter (Floating Panel) is active.

Item	Element	Description	Component
1	Header	The header provides context for the filter options and may display additional information, such as trends or key data points.	-
2	Quickfilter	Select input element for applying quick filters, allowing users to select one option at a time for filtering data.	Filter Chip
3	More Actions	Offers additional actions options in a dropdown menu.	Tertiary Icon Button
4	Static Card	Container for data content and filter options.	Card
5	Slot	Slot element to add related content.	Slot

Good to know

We use Slots in the body area to provide flexibility for content customization, ensuring that the structure remains consistent across different flows.

Working with Slots

Specification and properties

Variants

Quickfilter

Filter bar

Floating panel

Filter Type	Usage	Description
Quick Filter	Simple	Applied to specific dataset content, such as Data Cards and Reports.
Filter Bar	Inline	Applied to full-page content, providing an always-visible option to filter the entire page.
Floating Panel	Complex	Used for advanced filter configuration, such as saving a new view, multi-criteria or range-based filters.

Filter Triggers

Page header

Use a Tertiary Icon Button in the page header to trigger the filter for the entire page content.

Alternatively, a quick filter can be placed in the page header.

Limit the number of actions in the header to a maximum of 3.

When using tabs to separate content, place the filter icon button directly beneath the tabs.

Content Header

When the page is divided into sections (e.g., Trend Cards and Tables), and the filter should only apply to the table, it is recommended to use a Tertiary Button in the table bar for clearer interaction.

Nested

Quick filters can be nested within each data card. However, it is important to consider how these filters interact with filters applied in the page header to avoid conflicts.