A filter chip applies or unapplies its value to a section of dynamic page content (e.g. search results).

A button uses the aria-pressed state to convey application or non-application of the filter. For links, no special treatment is required for the unnapplied filter state.

After filter chip is loaded in the dom, add filter-chip--animated so the animations can work. This only needs to be added for button filter chips

For the applied filter state, links do not support the aria-pressed property; therefore use clipped text to explictly convey that the filter is applied.

Expressive Filter Chip

Replace the icon with an image and use the filter-chip--expressive modifier to create a more expressive filter chip.

Pet SuppliesPet Supplies

The same rules for links apply; they require clipped text to explicitly convey that the filter is applied.

Pet SuppliesPet Supplies - filter applied

Menu Button Chip

A filter chip can be used as the button inside of a menu button component.

When options are selected, the button label should indicate the number of selected filters.