Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System

Filter Chip

Warning: draft

Filter Chips are used to display dismissible filter chips


View Source File

Code snippet


React Properties Documentation

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


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


Text for the filter chip.


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

onDeleterequired() => void

Function to call when filter chip is dismissed.


Use alternate thinner close icon in place of standard.


Sets the size of the chip to larger version.


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


  • 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.


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


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

VariableDefault Core Theme Value