Badge & Tag

Status labels and removable chips.

DraftNewActivePendingOverdue

GrayBrandWarningErrorSuccess

DesignFigmaTokensWeb

Badge & TagLive · light and dark follow the theme switch

Usage

import { Badge, Tag } from '@stanvision/atomus-react';

<Badge color="success" dot>Active</Badge>
<Badge color="brand" variant="solid">New</Badge>
<Tag onRemove={() => remove(id)}>Figma</Tag>

Badge

Labels a status or count next to content.

Provide

• children — one or two words (Figma: Label).
• color — gray · brand · error · warning · success; variant — light (tinted) or solid (Figma: Style).
• size — sm 20 · md 24 · lg 28; dot, icon, onClose (Figma: Dot, Leading icon, Close).
• Always keep the word: colour alone never carries the status.

Don’t

• Don’t use solid warning with small text — white on amber is 2.2:1. Prefer the light warning badge.
• Don’t use badges as buttons; for removable values use Tag.

Tag

A compact, removable chip for filters, keywords and selected values (Tags input, Multi-select).

Provide

• children (Figma: Label), size sm 24 · md 28 · lg 32, optional icon.
• onRemove shows the × button (Figma: Close); its label reads “Remove <value>”.

Don’t

• Don’t use tags for status — use Badge.

In Figma

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.