Skip to main content
U.S. Flag

An official website of the United States government

Filter Chip

Filter Chips are used to display dismissible filter chips.

Warning: draftGithubStorybook logoStorybook

Examples

Loading

Code

React

React Properties Documentation
NameTypeDefaultDescription
idstring

Id for filter chip button. If not provided, a unique id will be automatically generated and used.

classNamestring

Class to be applied to the outer <div> that contains filter chip button.

labelrequiredstring

Text for the filter chip.

ariaClearLabelstring

Labels filter action, i.e., "Remove." For screenreader support.

onDeleterequired() => void

Function to call when filter chip is dismissed.

useAlternateIconboolean

Use alternate thinner close icon in place of standard.

sizeliteral

Sets the size of the chip to larger version.

Styles

The following Sass variables can be overridden to customize FilterChip components:

Sass variables for filter-chip
VariableDefault Core Theme Value
$filter-chip__border-radius9999px
$filter-chip__background-color$color-primary-alt-lightest
$filter-chip__border-color$color-primary
$filter-chip__color$color-base
$filter-chip__background-color--active$color-primary
$filter-chip__border-color--active$color-primary
$filter-chip__color--active$color-white
$filter-chip-icon__color$color-base
$filter-chip-icon__color-active$color-white

Guidance

When to use

  • Use to clearly indicate to the user what filters have been applied to a set of results and provide a quick and easy way to remove a selected filter

When to consider alternatives

  • When many filter chips would be displayed and available screen real estate is limited
  • When a badge is sufficient in place of a filter chip

Usage

  • Do not mix badges and filter chip as it can be confusing to the user
  • Do not use filter chip when a badge is sufficient, i.e., when none of the tags are removable
  • Filter chips should be short and not wrap to the second line
  • Allow adequate spacing (at least 8px) between each filter chip, as much as the design will allow.
  • The colors of the Filter Chip can be overriden using the Sass variables listed below, but should not be overriden with colors outside of the color palette.

Accessibility

  • Enter, Backspace, Delete, and Spacebar will remove the tag when it is in focus