Components

Chip(React)

Compact controls that allow for toggling and filtering

Version:	`14.18.2` •View source•Changelog•Report 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.

function FilterChipExample() {
    const [isSelected, setIsSelected] = React.useState(undefined);
    return (
        <FilterChip
            text={isSelected ? "I'm Selected" : 'Select Me'}
            isSelected={isSelected}
            onClick={() => setIsSelected(!isSelected)}
        />
    );
}

function FilterChipExample() {
    const [isSelected, setIsSelected] = React.useState(undefined);
    return (
        <FilterChip
            text={isSelected ? "I'm Selected" : 'Select Me'}
            isSelected={isSelected}
            onClick={() => setIsSelected(!isSelected)}
        />
    );
}

With the icon prop:

function FilterChipIconExample() {
    const [isSelected, setIsSelected] = React.useState(true);
    return (
        <FilterChip
            text="New York"
            icon={isSelected && <ContentActionsCheckTiny />}
            isSelected={isSelected}
            onClick={() => setIsSelected(!isSelected)}
        />
    );
}

function FilterChipIconExample() {
    const [isSelected, setIsSelected] = React.useState(true);
    return (
        <FilterChip
            text="New York"
            icon={isSelected && <ContentActionsCheckTiny />}
            isSelected={isSelected}
            onClick={() => setIsSelected(!isSelected)}
        />
    );
}

Below is an example of multiple FilterChips.

function MultipleFilterChipExample() {
    const [selection, setSelection] = React.useState('Canada');
    return (
        <div>
            <FilterChip
                text="Canada"
                isSelected={selection == 'Canada'}
                onClick={() => setSelection('Canada')}
            />
            <FilterChip
                text="United States"
                isSelected={selection == 'United States'}
                onClick={() => setSelection('United States')}
            />
            <FilterChip
                text="Philippines"
                isSelected={selection == 'Philippines'}
                onClick={() => setSelection('Philippines')}
            />
        </div>
    );
}

function MultipleFilterChipExample() {
    const [selection, setSelection] = React.useState('Canada');
    return (
        <div>
            <FilterChip
                text="Canada"
                isSelected={selection == 'Canada'}
                onClick={() => setSelection('Canada')}
            />
            <FilterChip
                text="United States"
                isSelected={selection == 'United States'}
                onClick={() => setSelection('United States')}
            />
            <FilterChip
                text="Philippines"
                isSelected={selection == 'Philippines'}
                onClick={() => setSelection('Philippines')}
            />
        </div>
    );
}

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
icon
Icon from Thumbprint Icons to render within the chip. It must be one of the tiny icons.
Type
React.ReactNode