ComponentsData DisplayChip

Chip

4 variants · 6 colors · 3 sizes · ChipGroup single/multi · icons · avatar · badge · removable

VariantsColorsSingle selectMulti selectOverflowIconsBadgeLoadingRemovableAvatarColor dotSizes

Variants

Live preview

outlined, filled, tonal, and elevated chip styles

App.tsx

tsx

1<Chip variant="outlined">Outlined (default)</Chip>
2<Chip variant="filled">Filled</Chip>
3<Chip variant="tonal">Tonal</Chip>
4<Chip variant="elevated">Elevated</Chip>

Colors — selected state

Live preview

All six color variants shown in outlined and filled styles

App.tsx

tsx

1{/* Outlined row */}
2<Chip color="default"   variant="outlined" selected>Default</Chip>
3<Chip color="secondary" variant="outlined" selected>Secondary</Chip>
4<Chip color="success"   variant="outlined" selected>Success</Chip>
5<Chip color="warning"   variant="outlined" selected>Warning</Chip>
6<Chip color="error"     variant="outlined" selected>Error</Chip>
7<Chip color="info"      variant="outlined" selected>Info</Chip>
8 
9{/* Filled row */}
10<Chip color="default"   variant="filled" selected>Default</Chip>
11<Chip color="secondary" variant="filled" selected>Secondary</Chip>
12<Chip color="success"   variant="filled" selected>Success</Chip>
13<Chip color="warning"   variant="filled" selected>Warning</Chip>
14<Chip color="error"     variant="filled" selected>Error</Chip>
15<Chip color="info"      variant="filled" selected>Info</Chip>

ChipGroup — single select

Live preview

mode=single allows only one chip to be active at a time

App.tsx

tsx

1const [filter, setFilter] = useState<string[]>(['all'])
2 
3<ChipGroup mode="single" value={filter} onChange={setFilter} variant="filled">
4  <Chip value="all">All</Chip>
5  <Chip value="active">Active</Chip>
6  <Chip value="pending">Pending</Chip>
7  <Chip value="archived">Archived</Chip>
8</ChipGroup>

ChipGroup — multi select

Live preview

mode=multi allows any number of chips to be selected simultaneously

App.tsx

tsx

1const [tags, setTags] = useState<string[]>(['react', 'ts'])
2 
3<ChipGroup mode="multi" value={tags} onChange={setTags}>
4  <Chip value="react">React</Chip>
5  <Chip value="ts">TypeScript</Chip>
6  <Chip value="tailwind">Tailwind</Chip>
7  <Chip value="vue">Vue</Chip>
8  <Chip value="angular">Angular</Chip>
9  <Chip value="svelte">Svelte</Chip>
10</ChipGroup>

Overflow

Live preview

max prop limits visible chips and adds a +N more indicator

App.tsx

tsx

1<ChipGroup mode="multi" value={tags} onChange={setTags} max={3}>
<Chip value="react">React</Chip>
<Chip value="ts">TypeScript</Chip>
<Chip value="tailwind">Tailwind</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="angular">Angular</Chip>
7</ChipGroup>

With icons

Live preview

leadingIcon renders an icon before the label — must be a valid IconName from omverse-ui

App.tsx

tsx

1<Chip leadingIcon="star">Starred</Chip>
2<Chip leadingIcon="settings">Settings</Chip>
3<Chip leadingIcon="bell"  color="warning" variant="tonal">Alerts</Chip>
4<Chip leadingIcon="check" color="success" variant="tonal">Done</Chip>

With badge

Live preview

badgeCount shows a numeric badge after the label

App.tsx

tsx

1<Chip badgeCount={4}>Inbox</Chip>
2<Chip badgeCount={12} color="error"   variant="tonal">Unread</Chip>
3<Chip badgeCount={3}  color="info"    variant="filled">Mentions</Chip>

Live preview

loading prop replaces the chip content with a spinner

App.tsx

tsx

1<Chip loading>Processing...</Chip>
2<Chip loading color="secondary" variant="tonal">Uploading...</Chip>

Input chips — removable

Live preview

removable adds a × button; onRemove fires when it's clicked

App.tsx

tsx

1const [emails, setEmails] = useState(['john@example.com', 'alice@example.com', 'bob@example.com'])
2 
3{emails.map(email => (
4  <Chip
5    key={email}
6    removable
7    onRemove={() => setEmails(prev => prev.filter(e => e !== email))}
8    variant="tonal"
9  >
10    {email}
11  </Chip>
12))}

With avatar

Live preview

avatarSrc renders a profile image before the label

App.tsx

tsx

1<Chip avatarSrc="https://i.pravatar.cc/150?img=1" avatarAlt="John">John Doe</Chip>
2<Chip avatarSrc="https://i.pravatar.cc/150?img=5" avatarAlt="Jane">Jane Smith</Chip>
3<Chip avatarSrc="https://i.pravatar.cc/150?img=3" avatarAlt="Bob">Bob Lee</Chip>

Color dot

Live preview

colorDot renders a small colored circle before the label

App.tsx

tsx

1<Chip colorDot="#10B981">Design</Chip>
2<Chip colorDot="#3B82F6">Engineering</Chip>
3<Chip colorDot="#F59E0B">Marketing</Chip>
4<Chip colorDot="#EF4444">On hold</Chip>

Sizes

Live preview

sm, md (default), and lg chip sizes

App.tsx

tsx

1<Chip size="sm" variant="filled">Small</Chip>
2<Chip size="md" variant="filled">Medium</Chip>
3<Chip size="lg" variant="filled">Large</Chip>

Disabled

Live preview

disabled prevents all interaction

Chip props

Props

PropTypeDefaultDescription

childrenReactNode—Text content of the chip

variant'outlined' | 'filled' | 'tonal' | 'elevated''outlined'Visual style of the chip

size'sm' | 'md' | 'lg''md'Size of the chip

selectedbooleanfalseSelected / active state

leadingIconIconName—Icon name shown before the label (from omverse-ui iconMap)

removablebooleanfalseShows a remove (×) button

onRemove() => void—Callback when the remove button is clicked

avatarSrcstring—Avatar image URL shown before the label

avatarAltstring—Alt text for the avatar image

colorDotstring—CSS color for a colored dot before the label

badgeCountnumber—Badge count shown after the label

loadingbooleanfalseReplaces content with a spinner

disabledbooleanfalseDisables the chip

ChipGroup props

Props

PropTypeDefaultDescription

valuestring[]—Controlled selected value(s)

onChange(value: string[]) => void—Callback when selection changes

mode'single' | 'multi''multi'Single or multi-select mode

maxnumber—Max chips shown before +N overflow

size'sm' | 'md' | 'lg'—Size applied to all chips

variant'outlined' | 'filled' | 'tonal' | 'elevated'—Variant applied to all chips

childrenReactNode—Chip components with a value prop