Chip

Atom

An interactive pill for filter chips, tags, and selectable tokens. It carries an optional leading icon and a label, becomes tappable with onPress, and grows a trailing "×" remove button with onRemove.

src/atoms/chip

View in Controls

Playground

Every control sets a real prop of ChipProps. The JSX below updates as you go.

Web

iOS

Android

Design

Props

children

string

Color

pick one

default

success

warning

destructive

info

neutral

Emphasis

pick one

default

secondary

primary

outline

icon

icon

none

count

string

trailing

icon

none

selectable

boolean

selected

boolean

disabled

boolean

JSX · ChipProps

<Chip>Design</Chip>

Variants

6 examples from src/atoms/chip/chip.md, each rendered live from its own JSX.

Bug

Chore

Docs

Feature

Design

Backend

Frontend

Research

Infra

Growth

Archived

Colors

<Row wrap>

  <Chip red>Bug</Chip>

  <Chip orange>Chore</Chip>

  <Chip amber>Docs</Chip>

  <Chip green>Feature</Chip>

  <Chip teal>Design</Chip>

  <Chip blue>Backend</Chip>

  <Chip indigo>Frontend</Chip>

  <Chip violet>Research</Chip>

  <Chip purple>Infra</Chip>

  <Chip pink>Growth</Chip>

  <Chip gray>Archived</Chip>

</Row>

Passing

Flaky

Failing

Queued

Skipped

Status

<Row wrap>

  <Chip success>Passing</Chip>

  <Chip warning>Flaky</Chip>

  <Chip destructive>Failing</Chip>

  <Chip info>Queued</Chip>

  <Chip neutral>Skipped</Chip>

</Row>

Neutral

Accent

Outline

Emphasis

<Row>

  <Chip>Neutral</Chip>

  <Chip primary>Accent</Chip>

  <Chip outline>Outline</Chip>

</Row>

Verified

With leading icon

A leading <Icon /> is auto-tinted to the chip's color, so a bare <Icon check /> matches without threading the color through.

<Chip success icon={<Icon check size={14} />}>Verified</Chip>

Role: Admin

Removable filters

onRemove grows the trailing "×"; wire it to your own state to drop the filter.

<Chip onRemove={() => {}}>Role: Admin</Chip>

Selectable

A selectable chip is a filter chip: the outlined pill at rest, and the accent's soft wash inside an accent edge, leading with a check, once selected.

<Row>

  <Chip selectable defaultSelected>Design</Chip>

  <Chip selectable>Engineering</Chip>

</Row>

States

Hover, focus and press are pinned so they can be compared side by side; the rest are real props.

Design

default

Design

hover

Design

focus

selected

Design

disabled

Anatomy

Design

12

1

Container

2

Leading icon

3

Label

4

Count

5

Trailing control

Dimmed parts appear only in some states or variants.

Props

50 props on ChipProps, grouped as they are declared in source. Required props are marked *.

Prop

Type

Default

Description

Props

14 props

children

ReactNode

–

The chip label.

count

number | string

–

A dimmed trailing count, set in the mono face.

start

boolean

false

Pin a chip within an app-owned host layout.

icon

ReactNode

–

A leading element (e.g. an <Icon /> or a small <Avatar />). An <Icon /> is auto-tinted to the chip's label color unless it sets its own color.

trailing

ReactNode

–

A trailing element (e.g. a chevron for a menu trigger). Rendered after the label.

onPress

(event?: GestureResponderEvent) => void

–

Makes the whole chip tappable (e.g. toggling a filter). Called with the press event, which a ChipGroup option's Space key does not have, so an href chip that routes on the client calls event?.preventDefault() here.

href

string

–

Makes the chip a LINK to this destination (a route or a URL): on the web react-native-web renders the chip as an <a href>, so middle-click, cmd-click and open-in-new-tab work and assistive tech hears a link; it takes the link chip's hover (the accent ink inside an accent edge) in place of the brightening. Native platforms have no anchors, so pair it with an onPress that navigates through the host's router, as Button's href does. While disabled the anchor is suppressed. A link is not a toggle, so it is ignored on a selectable chip or a ChipGroup option.

hrefAttrs

{ target?: "_blank" | "_self"; rel?: string; download?: boolean | string }

–

Anchor attributes forwarded with href on the web (react-native-web's hrefAttrs): target, rel, download. Ignored without href, and everywhere natively.

onRemove

() => void

–

Adds a trailing "×" remove button firing this handler.

selectable

boolean

false

Turns the chip into a filter toggle that owns its own selected state: pressing it lights up (to the accent's soft wash, inside an accent edge on the web and iOS) and back. Selection is controlled via selected, uncontrolled via defaultSelected.

selected

boolean

false

Selected state for a selectable chip (CONTROLLED). Omit for uncontrolled use.

defaultSelected

boolean

false

Initial selected state for an uncontrolled selectable chip.

onSelectedChange

(selected: boolean) => void

–

Fired with the next selected state when a selectable chip is pressed.

value

string | number

–

The chip's option value inside a ChipGroup: the chip is one option of the pick-one set, selected when the group's value is this one, and reads as a radio. Ignored outside a group.

Color axis

pick one

5 props

success

boolean

false

warning

boolean

false

destructive

boolean

false

The danger tone. This is the name the intent axis uses across the kit (Button, AlertDialog, and every chart) and the one the design hand-off uses here too.

info

boolean

false

neutral

boolean

false

Free-form palette hues, plus `gray` for an explicit neutral tag

18 props

red

boolean

false