Components

Chip

Interactive, removable chips in five tones and three variants.

Chip represents filters, selections, and removable tokens.

Example

Preview

NeutralInfoSuccessWarningRemovable

import { Chip } from '@officina/ui';

<Chip tone="success" variant="solid">Success</Chip>
<Chip tone="danger" onRemove={() => remove(id)}>Removable</Chip>

API

Prop	Type	Default	Description
children	ReactNode	—	Chip label content.
icon	ReactNode	—	Optional leading icon.
interactive	boolean	—	Render as a button (clickable/selectable) rather than a static span.
onRemove	() => void	—	When provided, renders a remove (×) button that calls this handler.
removeLabel	string	Remove	Accessible label for the remove button.
size	enum	md	Chip size.
tone	enum	neutral	Semantic colour.
variant	enum	soft	Fill style: solid, soft, or outline.

Badge

Compact status and category labels with six semantic tones and an optional dot.

Tag

Compact category labels in four tones.

Chip

Example

API

On this page