Label

Status: deprecatedAccessibility reviewedDeprecatedtenet-ui@0.4.0

Deprecated. Use `Tag` instead (since 0.4.0). `Tag` now carries the same status variants (`success` / `danger` / `attention` / `muted` / `accent`) and is read-only when `onRemove` is absent, so one pill component covers both status words and removable chips — and the name no longer collides with `FormControl.Label`. `Label` keeps rendering until 0.5.0. (since 0.4.0)

import { Label } from 'tenet-ui';

Also accepts every prop of HTMLAttributes<HTMLSpanElement>.

Source: src/components/Label/Label.tsx

Usage guidelines

Deprecated since 0.4.0 — use Tag. Tag carries the same status variants (success, danger, attention, muted, accent, default) and is read-only when onRemove is absent. Replace <Label variant="success">Published</Label> with <Tag variant="success">Published</Tag>. Label keeps rendering (with a dev warning) until 0.5.0. The rules below describe the legacy behaviour.

When to use: a small status / category pill attached to an item (e.g. bug, triaged, ready). Use Label instead of a hand-styled <span> so the color schemes stay owned by the design system.

Rules

Choose variant by meaning, not by color: success for positive/done, danger for problems, accent for emphasis, muted/default for neutral tags.
Do not compute your own fills, borders, or translucent backgrounds from a hex value — that is exactly the anti-pattern this component exists to remove. Map your data’s category to a variant.
Keep label text short (one or two words). For long-form status, use text, not a Label.
Label is non-interactive. For a clickable tag, wrap or use a button/link, don’t add click handlers that look like plain text.

Do / Don’t

✅ <Label variant="danger">bug</Label>
✅ map data → variant: const variant = issue.blocking ? 'danger' : 'muted'
❌ <span style={{ background: 'rgba(207,34,46,.18)', color: '#ff8182', border: '1px solid rgba(207,34,46,.35)' }}>bug</span> — hand-tuned translucent colors; reinvents the component.

Examples

3 stories for Label — open in Storybook

Default components-label--default
Variants components-label--variants
Sizes components-label--sizes

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'accent' \| 'success' \| 'danger' \| 'attention' \| 'muted'` LabelVariant	`default`	Semantic color scheme. Pick by meaning (success/danger/accent), not by raw color.
`size`	`'small' \| 'medium'` LabelSize	`medium`	Label size.
`children`	`ReactNode`	—