Chip

A compact, pressable label used for selection, filtering, or tagging, with optional selected state and remove action.

Selectable

<Chip label="Selected" isSelected onPress={() => {}} />
<Chip label="Unselected" onPress={() => {}} />
<Chip label="Disabled" isDisabled onPress={() => {}} />

Removable

React

TypeScript

<Chip label="React" isSelected onRemove={() => {}} />
<Chip label="TypeScript" isSelected onRemove={() => {}} />

Custom remove icon

By default the remove button shows a plain ✕ glyph. Pass removeIcon to use a real icon instead: any component matching TVajraIconComponent.

React

import { XIcon } from '@devraj-labs/vajra-ui-icons';

<Chip label="React" isSelected onRemove={() => {}} removeIcon={XIcon} />

Custom colors

<Chip
  label="Custom"
  isSelected
  selectedBg="success"
  selectedColor="textInverse"
  onPress={() => {}}
/>

Props

Prop	Type	Default	Description
label	string		Required. Chip text.
isSelected	boolean	false	Toggles between selected and unselected color scheme.
onPress	() => void		When provided, makes the chip pressable.
onRemove	() => void		When provided, renders a remove (✕) button.
removeIcon	TVajraIconComponent		Icon shown in the remove button, when onRemove is set. Defaults to a plain ✕ glyph.
isDisabled	boolean	false	Disables press interactions and dims opacity.
selectedBg	TVajraColors	'primary'	Background color when selected.
selectedColor	TVajraColors	'textInverse'	Text/icon color when selected.
unselectedBg	TVajraColors	'surfaceRaised'	Background color when not selected.
unselectedColor	TVajraColors	'text'	Text/icon color when not selected.
testID	string		Test identifier forwarded to the root container.