Data Display

Chip

Compact pill-shaped UI elements for switching between categories (Segmented) or applying multiple filters (Filter). Segmented chips allow only one active state at a time and cannot be removed. Filter chips support multi-select and can be dismissed.

V 1.0View in Storybook
Controls
Label
Selected
Type
Show leading icon
Show Dropdown
Show Cross
Segmented-Chip

Variants

TypeDifferent variants of the Chip component
Segmented-Chip
Type = Segmented Chip
Filter-Chip
Type = Filter Chip
SelectedSelected state for both chip types
Segmented-Chip
Selected = False
Segmented-Chip
Selected = True
Filter-Chip
Selected = False
Filter-Chip
Selected = True

Props

Name
Type
Default
Type*
string
Segmented
Selected*
boolean
False

Code

import { Chip } from '@/src/components/Chip/Chip'

// Segmented chip — unselected
<Chip type="segmented" selected={false} label="Segmented-Chip" onClick={() => {}} />

// Segmented chip — selected
<Chip type="segmented" selected={true} label="Segmented-Chip" onClick={() => {}} />

// Filter chip — unselected
<Chip type="filter" selected={false} label="Filter-Chip" onClick={() => {}} onRemove={() => {}} />

// Filter chip — selected
<Chip type="filter" selected={true} label="Filter-Chip" onClick={() => {}} onRemove={() => {}} />