Short description

The filter tag is a way to explicit show what options the user has to choose between within a category.

Above: Slide-out for the filter pattern, including the filter tags component.

When and how to use it

Filter tags can be based on what the user needs. For example, if a filter pattern is being used related to accounts and the user has accounts in three countries. The user only needs those three options as filter tags. If the user only has accounts in one country, the filter tag category for countries is not needed.

Above: Example of how filter tags can be used

If the category includes a variety of filter tags, a section expander is good to consider. See example below. Usage of the section expander depends on the context. Consider how much size there is available, rather than how many filter tags are displayed.

Above: Example of section expander in combination with filter tags

Related component: Chips

When including the filter tags, include the chips component for the user to easily see what choices was made. As the chips component is being displayed, the user can remove the property for a more smooth usage.

Do’s and don’ts

• Use a slide-out for filter application
• Provide relevant predetermined options
• Allow multiple selections
• Make it easy to see and deselect a filter with the chips component

• Don't use too many options per filter category, consider the accordion component if necessary

Related

Article

• Cunha, L. (2017), How to craft a kickass filtering UX. https://uxdesign.cc/crafting-a-kickass-filtering-ux-beea1798d64b

Measurements

• Height: 2 rem
• Distance from text to side: 0.5 rem
• Distance between two filter tags: 0.5 rem

For size specification for components used in the filter component: Slide-out, Tab, Chips, Section expander, Date picker, form components.

Typography

• Font: SEB Sans Serif Medium, 16px

States

• Normal text: Grey 800
• Normal background: Grey 600
• Background: Transparent with 1 px border
• Hover background: blue
• Pressed state text: Dark blue 2
• Pressed state border: Dark blue 2
• Focus state shadow: Blue shadow X:0, Y:0, Blur:4, Spread:1

• Blue
• Dark blue 2
• Grey 600
• Grey 800

1 rem = 16px