Components

Chip

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.

Component

ChipV2 is the single chip primitive. It is built on top of React Aria’s ToggleButton and styled with v2 semantic tokens. There is not yet a ChipGroup component, so you compose ChipV2 directly to build the chip patterns below: a single-select FilterChip, a multi-select ToggleChip, and (eventually) a Removable Chip.

The isSelected prop determines if a chip is selected, and onClick receives the new selection state.

FilterChip

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

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

With the icon prop:

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

With the iconRight prop:

function FilterChipIconRightExample() {
    const [isSelected, setIsSelected] = React.useState(false);
    return (
        <ChipV2
            text="Price"
            iconRight={<NavigationCaretDownTiny />}
            isSelected={isSelected}
            onClick={selected => setIsSelected(selected)}
        />
    );
}

When neither text nor children are provided, the chip renders a placeholder (skeleton) state. This is useful while the eventual content is still loading. The placeholder is non-interactive and is removed from the tab order.

function PlaceholderExample() {
    return (
        <div>
            <ChipV2 />
            <ChipV2 />
            <ChipV2 />
        </div>
    );
}

Because a FilterChip behaves like a button, only one option in a group is selected at a time. Below is an example of a single-select group of chips.

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

ToggleChip

A toggle chip behaves like a checkbox and is used for a set of options where more than one option can be selected. There is no separate ToggleChip component — because ChipV2 is built on React Aria’s ToggleButton, you implement toggle behavior by tracking the selected options yourself (for example, in a Set) and toggling each chip’s isSelected independently in onClick.

function ToggleChipExample() {
    const options = ['Beverages', 'Snacks', 'Produce', 'Frozen'];
    const [selected, setSelected] = React.useState(new Set(['Snacks']));

    const toggle = option => {
        setSelected(prev => {
            const next = new Set(prev);
            if (next.has(option)) {
                next.delete(option);
            } else {
                next.add(option);
            }
            return next;
        });
    };

    return (
        <div>
            {options.map(option => (
                <ChipV2
                    key={option}
                    text={option}
                    isSelected={selected.has(option)}
                    onClick={() => toggle(option)}
                />
            ))}
        </div>
    );
}

Removable Chip

A removable chip represents a selection that can be dismissed, typically used to display and clear active filters or tags. It is currently not available as a React component.

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
isDisabled
Determines if the FilterChip is disabled, which changes the styling and prevents interactions. The default is for the FilterChip to be enabled.

Type
boolean
Default
false