Chip

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.
A Chip is a LOW-emphasis tag, not a call to action: the neutral chip is Dark Factory's quiet pill (the soft surface color under the foreground), and a coloured chip is its soft pill (the color's wash under the color's ink, the recipe Alert and the other toned surfaces share). A selected filter chip is Dark Factory's selected chip, the solid primary (the tonal primary on Android, where Material 3 draws its selected filter chip). The chip owns that whole look, so no call site hand-composes a borderRadius + backgroundColor + padding Pressable.
Two orthogonal axes drive the look:
  • Color (pick one; default the neutral tag). A semantic status (success, warning, destructive, info, neutral) or a free-form palette hue (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, fuchsia, purple, pink, rose, gray). Status names read the theme's status colors (statusColors), so a success chip matches a success Badge and Alert; info is the primary color. Precedence when more than one is set: status names first, then hues in the order above.
  • Emphasis. outline drops the fill for a border-only chip in the same color; primary is the primary color's soft pill. These compose with any color, e.g. <Chip blue outline>.
Design
iOS
Design
Android
Design
Web
tsx
<Chip>Design</Chip>

Props

Prop
Description
children
ReactNode
The chip label.
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
() => void
Makes the whole chip tappable (e.g. toggling a filter).
onRemove
() => void
Adds a trailing "×" remove button firing this handler.
selectable
boolean
Turns the chip into a filter toggle that owns its own selected state: pressing it lights up (to the solid `primary`, the tonal primary on Android, or its color's soft pill when it has a color) and back. Selection is controlled via `selected`, uncontrolled via `defaultSelected`.
selected
boolean
Selected state for a selectable chip (CONTROLLED). Omit for uncontrolled use.
defaultSelected
boolean
Initial selected state for an uncontrolled selectable chip.
onSelectedChange
(selected: boolean) => void
Fired with the next selected state when a selectable chip is pressed.
success
boolean
Color axis (pick one; default the neutral tag). Two families, both a soft tint: Semantic status (matches Badge): success / warning / error / info / neutral.
warning
boolean
Color axis (pick one; default the neutral tag). Two families, both a soft tint: Semantic status (matches Badge): success / warning / error / info / neutral.
destructive
boolean
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.
error
boolean
—
info
boolean
—
neutral
boolean
—
red
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
orange
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
amber
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
yellow
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
lime
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
green
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
emerald
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
teal
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
cyan
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
sky
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
blue
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
indigo
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
violet
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
fuchsia
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
purple
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
pink
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
rose
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
gray
boolean
Free-form palette hues, plus `gray` for an explicit neutral tag.
secondary
boolean
Emphasis (orthogonal to color). `outline` is border-only; `primary` is the primary color's soft pill. `secondary` is the default neutral tag (kept for back-compat; same as passing no color).
primary
boolean
Emphasis (orthogonal to color). `outline` is border-only; `primary` is the primary color's soft pill. `secondary` is the default neutral tag (kept for back-compat; same as passing no color).
outline
boolean
Emphasis (orthogonal to color). `outline` is border-only; `primary` is the primary color's soft pill. `secondary` is the default neutral tag (kept for back-compat; same as passing no color).
disabled
boolean
A chip has ONE compact size, so there is no size axis.
accessibilityLabel
string
A chip has ONE compact size, so there is no size axis.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For layout composition only (not styling).

Do & Don’t

Removable filter

Don’t
Status: Active
×
Hand-build the pill from a raw Pressable with border-radius, padding, and a text "×".
Do
Status: Active
Use a Chip with onRemove so the pill and its "×" stay consistent and accessible.

Touch area

On Android a tappable Chip's touch area grows to the 48dp minimum without the chip changing size: 7dp above and below the 34dp chip, and nothing sideways once it is 48dp wide. On iOS it keeps 11pt of extra touch area on every side, which clears the 44pt minimum around the 25pt chip. The remove "×" pads out to the minimum on both, biased away from the label. Inside one chip the two never overlap: the chip splits the gap between its label and its "×", so a tap on the label never removes it. Between chips, React Native's own rule applies: where two touch areas overlap, the later chip takes the tap. Android chips that meet the minimum's width reach nothing sideways, so a Row of them never overlaps; on iOS two tappable chips closer than 22pt do, and a tap on the edge of one toggles the next. Leave room between chips on iOS where a mistaken toggle matters.
← Checkbox
Container →