Compact controls that allow for toggling and filtering
Chips allow users to make selections, filter content, or trigger small actions. Chips should appear as a group of multiple elements in most cases. Unlike buttons, chips shouldn’t navigate away from the current page. If the action requires a new page to load, please use a button instead of a chip.
There are two types of chip components: ToggleChip and FilterChip.
A toggle chip behaves the same way as a checkbox and should be used for a set of options where more than one option can be selected. It is currently not available as a React component.
A FilterChip is used to filter options and behaves like a button.
isSelected prop determines if a FilterChip is selected.
Below is an example of multiple FilterChips.
The text to display inside the FilterChip.
A function to be called whenever the selected state of the chip changes.
() => void
Determines if the FilterChip is selected, which changes the color. The default is for the FilterChip to start in the unselected state.
Icon from Thumbprint Icons to render within the chip. It must be one of the tiny icons.