Filter chips

Filter chips are used to filter information quickly without changing the current view. Use them as alternative to more complex filtering methods.


The anatomy of components comprises common elements you may encounter. In this context, they represent a standardised structure.

Visual design

These guidelines provide insight into designing your component. Consider them as inspiration and tailor them to suit your product's requirements.


Limit icon support to a strictly functional role, such as indicating that the filter chip is selected or includes a dropdown. Using other icons for decoration may clutter the limited space and increase cognitive load.


This is an interactive component, necessitating all relevant states for various interaction moments. Generally, the following states should be included in this component.

Make sure of checking the notes further below for additional clarifications.


The design of selected filter chips must avoid any confusion. Therefore, ensure a clear distinction between the two states.


Here are basic guidelines on color contrast requirements according to WCAG 2.1 guidelines. However, accessibility is much more than colour contrast. We will continue expanding these examples.

Ref. Name AA score Notes
1 Icon 4.5:1 -
2 Label 4.5:1 -
3 Background N/A 3:1 recommended
Ref. Name AA score Notes
1 Label 4.5:1 -
2 Outline N/A 3:1 recommended
3 Icon 4.5:1 -

Design takeaways

  • Avoid adding decorative icons.
  • Ensure states are clearly distinguishable.
  • Strengthen the select state with an icon.
Filter chips are used to filter information quickly without changing the current view. Use them as alternative to more complex filtering methods.

Best practices

Guidelines for incorporating this component into your screen designs.

All options

When dealing with a simpler set of filter chips (without a dropdown), consider adding an "All" option as the initial state. This option can also serve as a way to clear all applied filters.

Consider using a dropdown filter chip when you would like to group a subset of filters under the same category. However, limit the set of options to just a few.


Numbers along the main text label may be helpful for users to preview how many items they may encounter when the filter chip is selected. However, if this number is too big, it may not fit the layout properly or may reduce its value to users. For this reason, we suggest keeping numbers for cases where the total amount won't exceed 100.


Consider these guidelines when incorporating text content into this component.


Text should be succinct (ideally just 1 word) rather than lengthy sentences. Avoid adding verbs such as "select" or "filter" inside the filter chips


The variant with numbers is reserved for numeric content that represents the amount of available options under that filter. Avoid using this space for other kinds of text content.

Usage takeaways

  • Consider adding a simple filter chip to view all options.
  • Utilize a dropdown filter chip to group related options together.
  • When using numbers, limit them to 1-3 digits.
  • Strive to keep text at one-word length.
  • Avoid using filter chips with secondary text.