Chip

A compact interactive element used for filters, tags, suggestions, or input tokens.

Import

tsx

import { Chip } from '@tac-ui/native';

Playground

Interactively configure the Chip props below.

Chip

Variant

Label

tsx

<Chip variant="filter" onPress={() => {}}>Chip</Chip>

Variants

Five visually distinct variants: filter (accent text + border), assist (solid secondary fill), suggestion (dashed border, outlined), input (semi-transparent fill + solid border), and glass (solid secondary fill without border).

Filter

Assist

Suggestion

Input

Glass

tsx

<Chip variant="filter">Filter</Chip>
<Chip variant="assist">Assist</Chip>
<Chip variant="suggestion">Suggestion</Chip>
<Chip variant="input">Input</Chip>
<Chip variant="glass">Glass</Chip>

With Delete

Provide an onDismiss callback to render the remove button. Tapping the × button calls onDismiss without triggering the chip's own onPress.

React

TypeScript

Next.js

tsx

<Chip variant="filter" onDismiss={() => console.log('dismissed')}>React</Chip>
<Chip variant="input" onDismiss={() => console.log('dismissed')}>TypeScript</Chip>
<Chip variant="suggestion" onDismiss={() => console.log('dismissed')}>Next.js</Chip>

With Icon

Add a left icon with the leftIcon prop; pass any React node to display an icon before the chip label.

Favorites

Near Me

tsx

import { Star, MapPin } from '@tac-ui/icon-native';

<Chip variant="assist" leftIcon={<Star size={14} />} onPress={() => {}}>
  Favorites
</Chip>
<Chip variant="filter" leftIcon={<MapPin size={14} />} onPress={() => {}}>
  Near Me
</Chip>

Disabled

Pass the disabled prop to mute the chip and block all press interactions including onPress and onDismiss.

Disabled Filter

Disabled Assist

tsx

<Chip variant="filter" disabled>Disabled Filter</Chip>
<Chip variant="assist" disabled>Disabled Assist</Chip>

Selected State

Set selected to true to apply the accent color, indicating the chip is active in a filter group.

All

Active

Design

Engineering

tsx

<Chip variant="filter" onPress={() => {}}>All</Chip>
<Chip variant="filter" selected onPress={() => {}}>Active</Chip>
<Chip variant="filter" onPress={() => {}}>Design</Chip>
<Chip variant="filter" onPress={() => {}}>Engineering</Chip>

API Reference

Prop	Type	Default	Description
variant	"filter" \| "assist" \| "suggestion" \| "input" \| "glass"	"filter"	Visual and behavioral style of the chip.
onDismiss	() => void	-	Callback fired when the dismiss button is tapped. Renders the dismiss button when provided.
leftIcon	React.ReactNode	-	Icon node rendered at the leading edge of the chip.
selected	boolean	false	When true, applies the accent color to indicate active selection.
disabled	boolean	false	Disables the chip, muting it visually and blocking all press interactions.
onPress	() => void	-	Press handler for the chip.
children	React.ReactNode	-	Label content of the chip.
style	ViewStyle	-	Additional React Native style applied to the chip container.