Components

Chip(React)

Compact controls that allow for toggling and filtering

Version:14.4.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { FilterChip } from '@thumbtack/thumbprint-react';

Usage

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.

Components

There are two types of chip components: ToggleChip and FilterChip.

ToggleChip

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.

FilterChip

A FilterChip is used to filter options and behaves like a button.

The isSelected prop determines if a FilterChip is selected.

Below is an example of multiple FilterChips.

Props

FilterChip

  • text
    required

    The text to display inside the FilterChip.

    Type
    string
  • onClick
    required

    A function to be called whenever the selected state of the chip changes.

    Type
    () => void
  • isSelected

    Determines if the FilterChip is selected, which changes the color. The default is for the FilterChip to start in the unselected state.

    Type
    boolean
    Default
    false
Was this page helpful?

We use this feedback to improve the quality of our documentation.