Skip to content


FilterTag is an interactive component used to activate a filter on a large dataset.

Figma logo
  • Use when you want to filter data on a few parameters
    • Consider Checkbox if you have an extensive list of parameters you want to filter on
  • FilterTag implements an a tag
    • All native props will be forwarded to the element
  • Expects an href to a URL that returns filtered results
    • This event can be intercepted with an onClick, but the anchor should still load a page with the current filtered data even if JS is disabled

This example will toggle the active state based on the URL filter parameter; only one filter can be applied in this basic example.

React props
active  booleanIf true, the filter will marked as active
children  ReactNodeThe content of the Tag
href  stringURL to a filtered dataset; often includes URL parameters
  • FilterTag is a straight-forward component that does not require special consideration for accessibility

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

<FilterTag active href="/?lasagna=true">
<FilterTag href="/?lasagna=true&meatloaf=true">Lasagna</FilterTag>
const meatloafFilter = getByText('Meatloaf');
const lasagnaFilter = getByText('Lasagna');