Pill control for filtering, multi-select, and removable tags.
import { Chip } from "@/fragments/ui";Sourceimport { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" wrap>
<Chip>Soft</Chip>
<Chip variant="outline">Outline</Chip>
</Stack>npx @usefragments/cli add chipWrites src/fragments/ui/components/Chip plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Chip is a compound: import the root and reach its parts through dot notation.
Chip.GroupThe same ramp Badge and Button use, in both variants.
import { Stack } from '@/components/Stack';
<Stack direction="column" gap="sm">
<Stack direction="row" gap="sm" wrap>
<Chip tone="accent">Accent</Chip>
<Chip tone="info">Info</Chip>xs for filter rows; larger sizes match taller field tracks.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" align="center" wrap>
<Chip variant="outline" size="xs">Extra small</Chip>
<Chip variant="outline" size="sm">Small</Chip>
<Chip variant="outline" size="md">Medium</Chip>Both variants share one selection treatment.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" wrap>
<Chip selected>Soft</Chip>
<Chip variant="outline" selected>Outline</Chip>
</Stack>Leading face, for people-shaped selections.
<Chip avatar={<img src="https://i.pravatar.cc/32?u=chip" alt="" />}>
Jane Doe
</Chip>Trailing dismiss button clears the tag.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" wrap>
<Chip variant="outline" onRemove={() => {}}>React</Chip>
<Chip variant="outline" selected onRemove={() => {}}>TypeScript</Chip>
<Chip tone="info" onRemove={() => {}}>SCSS</Chip>Selection state is held by the group, not each chip.
<Chip.Group defaultValue={['react']}>
<Chip value="react">React</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="angular">Angular</Chip>
<Chip value="svelte">Svelte</Chip>
</Chip.Group>Custom JSX children need an explicit value.
<Chip.Group aria-label="Assignees">
<Chip value="jane">
<span>Jane Doe</span>
</Chip>
<Chip value="sam">
<span>Sam Lee</span>Dimmed and unreachable, selected or not.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" wrap>
<Chip variant="outline" disabled>Disabled</Chip>
<Chip variant="outline" disabled selected>Disabled selected</Chip>
</Stack>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Chip label text |
variant | enumsoftoutline | soft | Chrome family. soft is the tinted pill; outline is hairline-bordered on the page surface |
tone | enumneutralaccentinfosuccesswarningdanger | neutral | Semantic colour from the shared tone ramp. neutral is ink on the neutral surfaces; the others tint, border and ink from one derivation shared with Badge and Button |
size | enumxssmmdlg | "xs" | Chip size |
selected | boolean | false | Whether the chip is in a selected state |
icon | node | Not set | Icon element rendered before the label |
avatar | node | Not set | Avatar element rendered before the label |
onRemove | function | Not set | Makes chip removable. Called when X is clicked. |
value | string | Not set | Value identifier used by Chip.Group for selection tracking |
disabled | boolean | false | — |
onClick | function | Not set | — |