Chip

Setup

import { Chip } from '@fragments-sdk/ui';

Loading preview...

Prop	Type	Default	Description
`children`Required	`node`	Not set	Chip label text
`variant`	`enumfilledoutlinedoutlinesoft`	`filled`	Visual style variant
`size`	`enumxssmmdlg`	`md`	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	—

Keep chip labels short (1-3 words)
Use Chip.Group for multi-select sets with shared state
Use onRemove only when users should be able to dismiss the chip
Pair avatar chips with user-related selections (assignees, reviewers)
Provide an explicit value on Chip when using non-string/custom JSX children inside Chip.Group

Accessibility

Chips are buttons and use aria-pressed for selection state
Chip.Group is a grouping wrapper; add role/aria-label when needed for assistive context
Remove buttons include descriptive aria-label with chip text
Disabled chips are properly excluded from interaction