Filter Chips
Filters provide a set of controls to reduce items in a collection based on attributes the user is interested in (e.g. filtering items by creation date).
Filters can provide the following functionality:
- A list of interesting attributes common to items in a collection, and possible values by which to filter
- An indication of the currently applied filters
- A way to clear the currently applied filters
- A display of predefined filters
Filters can be listed horizontally if you have less than 5 filters and you have plenty of horizontal space above your collection.
On This Page
Small Chips
Default State
- Text
- Link with Icon - Hover
- Icon
- font-face: FontAwesome5ProLight
- font-size: 18px
- text-color: Teal
- code: plus (f067)
Additional States
Not Selected - Hover
- border-color: Teal Hover
- Text
- Link with Icon - Hover
- Icon
- text-color: Teal Hover
Not Selected - Active
- border-color: Teal Active
- Text
- Link with Icon - Active
- Icon
- text-color: Teal Active
Selected - Default
- background-color: Teal
- border: none
- Icon
- text-color: White
- code: times (f00d)
Selected - Hover
- border-color: Teal Hover
- border: none
- Text
- Link with Icon - Hover
- Icon
- text-color: White
- code: times (f00d)
Selected - Active
- border-color: Teal Active
- border: none
- Text
- Link with Icon - Active
- Icon
- text-color: White
- code: times (f00d)
Large Chips
Default State
- background-color: none
- border: 1px solid
- border-color: Teal
- Text
- Link with Icon
- Icon
- font-face: FontAwesome5ProLight
- font-size: 18px
- text-color: Teal
- code: plus (f067)
Additional States
Not Selected - Hover
- border: 2px solid
- border-color: Teal Hover
- Text
- Link with Icon - Hover
- Icon
- text-color: Teal Hover
Not Selected - Active
- border: 2px solid
- border-color: Teal Active
- Text
- Link with Icon - Active
- Icon
- text-color: Teal Active
Selected - Default
- background-color: Teal
- border: none
- Text
- Small Paragraph - White
- Icon
- text-color: White
- code: times (f00d)
Selected - Hover
- border-color: Teal Hover
- border: none
- Text
- Small Paragraph - White
- Icon
- text-color: White
- code: times (f00d)
Selected - Active
- border-color: Teal Active
- border: none
- Text
- Link with Icon - Active
- Icon
- text-color: White
- code: times (f00d)
Collapsed Filters
- background-color: Teal
- border: none
- Text
- Small Paragraph - White
- Circle
- background-color: White
- Circle Text
- font-face: Roboto-Bold
- font-size: 14px
- line-height: 24
- text-color: Teal
Behavior
When there are too many filters to display in the viewport, they condense into a Collapsed Filter that indicates the number of filters that are hidden. When opened, the hidden filters are exposed. The user is given an option to view fewer filters.
Collapsed
Expanded