Updated 18 December 2024
Filters
Updated 18 Dec 2024View FigmaUpdated 18 Dec 2024View Figma
Filters is a composite component that filters the items of a list or table.
Properties
Search bar
Show or hides the search field.
Filters bar
Has filters
Toggles first Filter Pill and the ‘Clear all’ button.
Number of filters
Show and hide up to five filter pills.
Filter pill
States
Filter active
Toggle to represent an active filter that is being applied to the experience.
Tone
Changes color of Filter Pill.
Add filter
States
Mobile
Removes label for mobile experience
Tips
Single filter with multiple filters
When a single filter has multiple filters applied (such as locations) seperate each item with a common inside a single Filter Pill.
Filters
Mobile/Filters