Components

Tag

Compact category labels in four tones.

Tag marks categories and keywords inline.

Example

Preview

DefaultSuccessWarningDanger

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

<Tag tone="success">Active</Tag>
<Tag tone="danger">Blocked</Tag>

Prop	Type	Default	Description
children*	ReactNode	—	Tag contents (label text or nodes).
tone	"default" \| "success" \| "warning" \| "danger" \| null	—

Chip

Interactive, removable chips in five tones and three variants.

List

Vertical container for stacked rows — the root of the List composition.