Chip

coffee

Filters

Open now

Rating 4+

Removable

Paris

Outdoor seating

With an avatar · small · disabled

Ada

Wi‑Fi

Delivery

Installation

npx axiom add chip

pnpm dlx axiom add chip

yarn dlx axiom add chip

bun x axiom add chip

Also copies: tappable.

Requires the close icon in your icon registry. Colors come from chip.{outline,filled}.{default,pressed,selected,disabled} in the component tokens.

Usage

import { Chip } from '@/components/ui/chip';

<Chip selected={onlyUnread} onPress={toggleUnread}>Unread</Chip>
<Chip onRemove={() => removeTag('travel')}>Travel</Chip>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The label.
`selected`	`boolean`	—	Selected state, drawn with the `primary` colors. Setting it makes the chip a toggle (`accessibilityRole="togglebutton"`).
`onPress`	`() => void`	—	Called when the chip is pressed. Usually toggles `selected` or opens a picker.
`onRemove`	`() => void`	—	Shows a close icon on the right. Pressing it calls `onRemove`; the icon has its own 44pt touch area.
`variant`	`'outline' \| 'filled'`	`'outline'`	`outline` for filters, `filled` for tags and entered values.
`size`	`'sm' \| 'md'`	`'md'`	Minimum height: 28 or 34pt. Grows with larger system text. The touch area stays 44pt.
`leading`	`IconName \| ReactNode`	—	Icon or Avatar before the label.
`trailing`	`IconName \| ReactNode`	—	Icon after the label, like a chevron for a chip that opens a menu. Ignored with `onRemove`.
`disabled`	`boolean`	`false`	Blocks presses and dims the chip.
`haptic`	`HapticKind \| false`	—	Haptic played when the finger touches a pressable chip. Off unless you pass a kind.
`accessibilityLabel`	`string`	label text	Override when the label alone is unclear. The remove button is announced as `"Remove <label>"`.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the chip.

Chip.Group

Prop	Type	Default	Description
`children`	`ReactNode`	—	`Chip` elements.
`gap`	`SpacingToken`	`2`	Space between chips, in both directions.

A View that lays the chips out on as many lines as they need. Other props go to that View.

For a single line that scrolls, put the group in a horizontal ScrollView: it no longer has a width to wrap at. Pad the row with the screen margins and leave half a screen of room after the last chip, so it never scrolls into a wall. The filter bar below does exactly that.

Haptics

Chips play nothing by default. A toggle chip in a filter bar can take haptic="selection". The remove icon never plays one. Nothing plays until your app connects a haptics library: see Haptics.

Use cases

Filter bar under a search

A Chip.Group in a horizontal ScrollView. Each chip toggles one filter; the list updates right away.

Inbox

Unread

Flagged

Attachments

To me

Grace HopperCompiler notes

Alan TuringRe: lunch

const { width } = useWindowDimensions();

<ScrollView
	horizontal
	showsHorizontalScrollIndicator={false}
	contentContainerStyle={{ paddingHorizontal: 16, paddingEnd: width / 2 }}
>
	<Chip.Group>
		{filters.map((f) => (
			<Chip
				key={f.id}
				size="sm"
				selected={active.has(f.id)}
				onPress={() => toggle(f.id)}
			>
				{f.label}
			</Chip>
		))}
	</Chip.Group>
</ScrollView>

Tags entered by the user

Each value becomes a removable chip next to the input.

New post

Publish

Topics

react-native

design

anima

Up to 5 topics.

Suggested:

animation

animals

<Chip.Group>
	{tags.map((t) => (
		<Chip key={t} variant="filled" size="sm" onRemove={() => removeTag(t)}>
			{t}
		</Chip>
	))}
</Chip.Group>

Filter that opens a picker

A chevron and a value in the label: the chip opens a BottomSheet instead of toggling.

Price: $$

Cuisine

PriceClear

$$$

$$$$

Apply

<Chip selected={price != null} trailing="chevron-down" onPress={openPriceSheet}>
	{price ? `Price: ${price}` : "Price"}
</Chip>

On this page