Chip | omverse-ui

Overview

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

Chip variants

Live preview

Chips represent compact attributes, filters, or actions without competing with primary buttons.

ChipExample.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>

Use chips for concise, removable values or filter choices. Keep labels short enough to scan as a group.

Anatomy

Root container and spacing boundary.
Primary content and optional secondary metadata.
State indicators and utility affordances (icons, badges, controls).
Optional helper text, grouping, and behavioral wrappers.

When to use

Choose Chip when a repeated, structured interaction is required.
Use it for clear, consistent operations across similar surfaces.
Use in forms, lists, and action workflows where clarity matters.

When not to use

Do not use only for decorative layout without interaction meaning.
Avoid duplicating the same behavior without distinct user context.
Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

Use semantic structure and visible labels whenever possible.
Preserve keyboard navigation and focus visibility.
Announce status and changes when context requires it.

Content guidelines

Prefer short, clear labels.
Keep content actions scannable and outcome-oriented.
Use consistent wording across similar components.

Examples

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

ChipGroup props

Props / API

Api 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

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