I'm following material guidelines and I need to apply filters to a table. The table header has the filter icon on the right side

Unexpanded filter Title

After the filter is applied, should the position of the "applied filter chip" be on the right or on the left?

Option 1
Option 2

1 Answer 1


Keeping the filter on the right provides a stable visual location to invoke the action.

There may not be a hard rule to this, but at a quick glance the user will see the icon in the same place, regardless of the viewport width and number of filters.

The other advantage is if you have a design system that shows all the filters, with 2-3 filter chips, you can remove them while the icon remains in place, as opposed to shifting to the right each time a filter is removed.

Thoughts about the filter chip

I'm not sure of your use case, but can you put the actual parameter being filtered, instead of '1 filter applied'?

This way the user knows what the filter consists of so they can assess the results.

enter image description here

Here's how the filters could stack while keeping the action icon in the same place:

enter image description here

  • Thanks @mike-m for a good explaination and improving my filter chips.
    – rahul_sann
    Commented Dec 18, 2023 at 4:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.