# Pills & Tags

> Frame pills, tags and chips: StatusTag, Tag, Chip, FilterChip, UtilityChip, IconBadge, TimePill and SampleWorkspaceLabel.

Web page: https://system.beibeidesign.com/components/pills-and-tags/

### StatusTag

Master Used in: Wingman 20 · WorkPal 7

Semantic status pill for pending, processing, review and completed states.

Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/status-tag.tsx)

Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.

Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.

[Required stylesheet: frame.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css)

```
npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/status-tag.json
```

Copy install command Close

THE canonical pill component. Every tag/badge/pill renders through this. 8 semantic variants × 2 sizes × icon override.

pending in-progress submitted in-review success failed expired neutral

pending in-progress submitted in-review success failed expired neutral

Outline Outline failed

Variant × state matrix (6×1 = 6 cells)

| variant ↓ / state → | default |
| --- | --- |
| pending | pending |
| in-progress | in-progress |
| in-review | in-review |
| success | success |
| failed | failed |
| neutral | neutral |

### Tag

Master Used in: Wingman 5 · WorkPal 3

Compact neutral label with an optional outline and tooltip.

Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/tag.tsx)

Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.

Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.

[Required stylesheet: frame.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css)

```
npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/tag.json
```

Copy install command Close

Thin alias — neutral StatusTag at size='sm' with no icon. Inline labels: emoji chips, n/3 counters, type labels.

Beta n/3 Outline Tooltip

### Chip

Master Used in: Wingman 7 · WorkPal 4

Compact rounded-full chip for inline suggestions, selections, draggable trait pickers.

Focus Health Family

Removable Remove

Variant × state matrix (2×3 = 6 cells)

| variant ↓ / state → | default | hover | disabled |
| --- | --- | --- | --- |
| label only | Plain chip | Plain chip | Plain chip |
| icon + label | Icon chip | Icon chip | Icon chip |

### FilterChip

Master Used in: Wingman 6 · WorkPal 5

Filter-bar chip — distinct from Chip (uses `type-detail` not `type-h2`, supports a count badge).

All 12 Documents 5 Tasks 7

Variant × state matrix (2×3 = 6 cells)

| variant ↓ / state → | default | hover | disabled |
| --- | --- | --- | --- |
| default | Default | Default | Default |
| active | Active | Active | Active |

### UtilityChip

Master Used in: Wingman 0 · WorkPal 2

Compact context action with optional pressed state for prompt toolbars.

Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/utility-chip.tsx)

Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.

Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.

[Required stylesheet: frame.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css)

```
npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/utility-chip.json
```

Copy install command Close

Mono-text utility pill for paths, IDs, tool-surface labels. Solid bg-bg-hover on hover (not gradient).

~/Code/beibei-apps main

### IconBadge

Master Used in: Wingman 16 · WorkPal 1

Decorative icon badge for message context or workflow groups; not an interactive control.

Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/icon-badge.tsx)

Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.

Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.

[Required stylesheet: frame.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css)

```
npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/icon-badge.json
```

Copy install command Close

Decorative icon-in-circle badge (non-interactive, aria-hidden) — a round bg-bg-hover plate behind a glyph, used next to list items / section headers. For a CLICKABLE round icon use IconButton.

### StatusStrip

Master Used in: Wingman 0 · WorkPal 1

DS-147. One-line passive status above a content area — a bg-bg-hover strip (fill only, no border) with a 16px secondary glyph and a type-caption line. Not a control, no dismiss. Pass role='status' when it appears or changes after load.

Couldn’t reach this folder’s remote — working from its local copy for now.

With role="status" — announced when it appears.

### TimePill

Master Used in: Wingman 0 · WorkPal 1

Compact time or effort label using the shared status presentation.

Install component Copy code [View source](https://github.com/BeibeiZhang/frame-design-system/blob/main/components/time-pill.tsx)

Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.

Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.

[Required stylesheet: frame.css](https://github.com/BeibeiZhang/frame-design-system/blob/main/styles/frame.css)

```
npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/time-pill.json
```

Copy install command Close

Thin alias — StatusTag (in-progress, sm) with a User icon. 'time estimate' semantics at call sites.

~3 min just now

### SampleWorkspaceLabel

Master Used in: Wingman 0 · WorkPal 2

DS-145. Passive blue label saying the data on screen is a sample. placement='inline' sits to the right of a page title on the same line and wraps under it on narrow screens (WorkPal guest mode: label 'Sample data' with a sign-in tooltip, on every page that would show the user's own content); placement='edge' is the ribbon pulled flush to a panel's left edge (default label).

Overview Sample data

Sample workspace