Filter chip

v4.1

Filter chips provide quick access to values that refine a list of content.

  • Skin
  • Marko
  • React
Stylized artwork of a dropdown quick filter.

Considerations

Clear

Filter chips clearly indicate the selected value(s) and there’s a clear way to adjust or reset them.

Flexible

Filter chips work for a wide variety of filter values across screen sizes.

Focused

Filter chips surface the top filter values or filter groups without overwhelming users.

Anatomy

Properties

When to use

Behavior

Screen size

Best practices

Specs