The filter component can be used in a lot of different use cases to help users reduce the amount of data displayed and find the information they need faster. These guidelines show you the different elements that compose the filter component.

Filter elementslink

The filter is composed of a header, main body with set of UI elements and actions.


There are three types of filter headers: basic header, round toggled header and square header. Always placed at the top part of the filter.

filter header

Body elements

Here are the main elements that you can combine to build a filter specific for your financial application.

filter body


Use the apply and cancel default actions. The Apply action is required to filter the related content.

filter actions

How to use filter in the appslink

Want to know how to use filter in a real app? Here is an example of the developer portal API catalog.

how to use filter