Skip to content
DOL Studio

Badge

Design: Stable Code: Coded labelstatuschip 2 Figma sets Badge/Style

Live preview

Dot (status indicator)

Status pulse — 6 tones. Use for online/offline/away/system-status surfaces.
brand
info
success
warning
danger
neutral

Count (numeric)

Numeric badge — 6 tones. Auto-truncates "99+" at >99.
3
brand
6
info
9
success
12
warning
15
danger
18
neutral

Label

Short uppercase signal text — 6 tones. Tone telegraphs context (brand=NEW, info=BETA, warning=WIP, etc.).
NEW
brand
BETA
info
DONE
success
WIP
warning
URGENT
danger
DRAFT
neutral

Import & files

Import
import { Badge } from "@dol/ui/badge";
Source file
packages/@dol/ui/src/badge/Badge.tsx

Spec

Spec Props · Usage

Props

Prop Type Default Description
tone 'neutral' | 'brand' | 'success' | 'danger' | 'amber' | 'blue' | 'purple' | 'sky' 'neutral' —
size 'sm' | 'md' 'sm' —

Usage

Max 2 tones per view. CVD note: blue + purple need pairing with icon/label per color.md §6.2.

Examples

Examples 1
  • Semantic tones

Figma source

Figma source 2 sets
Page
Badge
Sets
2
Primary set
Badge/Style · 22 variants Open in Figma →
Showing: Badge/Style
1 other set

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Badge
Slug: `badge`
Domain: general · Category: display
Design: stable · Code: coded


## Description
Small status / count chip. 2 sets: Layout + Style. Code parity: Badge + EyebrowBadge + SectionLabel.


## Import
```ts
import { Badge } from "@dol/ui/badge";
```
Source: `packages/@dol/ui/src/badge/Badge.tsx`


## Props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
| `tone` | `'neutral' | 'brand' | 'success' | 'danger' | 'amber' | 'blue' | 'purple' | 'sky'` | 'neutral' |  |
| `size` | `'sm' | 'md'` | 'sm' |  |


## Usage
Max 2 tones per view. CVD note: blue + purple need pairing with icon/label per color.md §6.2.


## Examples
- **Semantic tones**


## Figma source
Page: Badge
Sets: 2
Primary: Badge/Style
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=8557-96666

Related

  • 3

    KidBadge

    KIDCoded
  • Tag label

    Tag

    Coded
  • Featured
    New

    EyebrowBadge

    Code only
  • Section label

    SectionLabel

    Code only
  • DOL English logo

    Logo

    Coded

  • Avatar, User

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).