Skip to content
DOL Studio

Tag

Design: Stable Code: Coded labelremovablechip 8 Figma sets Tag, label

Live preview

Light variant

10 tones — brand / progress / info / special / success / warning / danger / neutral / neutral-dim / ai. Variant=light.
Tag
brand
Tag
progress
Tag
info
Tag
special
Tag
success
Tag
warning
Tag
danger
Tag
neutral
Tag
neutral-dim
Tag
ai

Light-border variant

10 tones — brand / progress / info / special / success / warning / danger / neutral / neutral-dim / ai. Variant=light-border.
Tag
brand
Tag
progress
Tag
info
Tag
special
Tag
success
Tag
warning
Tag
danger
Tag
neutral
Tag
neutral-dim
Tag
ai

Bold variant

10 tones — brand / progress / info / special / success / warning / danger / neutral / neutral-dim / ai. Variant=bold.
Tag
brand
Tag
progress
Tag
info
Tag
special
Tag
success
Tag
warning
Tag
danger
Tag
neutral
Tag
neutral-dim
Tag
ai

Size scale

7 sizes — 4xs / 3xs / 2xs / xs / sm / md / lg. Padding + font scale proportionally.
4xs
4xs
3xs
3xs
2xs
2xs
xs
xs
sm
sm
md
md
lg
lg

Radius

2 radii — block / round. Block = squared; round = pill.
Block
block
Rounded
round

With icons

Curated compositions — leftIcon / rightIcon slots for tag affordances (verified / review / featured / removable).
Verified
leftIcon
Review
leftIcon
Featured
left+right
Removable
rightIcon

Import & files

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

Spec

Spec Props · Axes · Size · Usage

Props

Prop Type Default Description
tone 'brand' | 'progress' | 'info' | 'special' | 'success' | 'warning' | 'danger' | 'neutral' | 'neutral-dim' | 'neutral-inverse' | 'transparent' | 'ai' 'brand' —
variant 'light' | 'bold' | 'outline' | 'light-border' 'light' —
size '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' '3xs' —
radius 'block' | 'round' 'block' —
leftIcon / rightIcon ReactNode - —
children ReactNode - —

Variants · Tones · Sizes

Variants
lightboldoutline
Tones
brandprogressinfospecialsuccesswarningdangerneutralneutral-dimneutral-inversetransparentai
Sizes
4xs3xs2xsxssmmdlg

Size spec

Size Height Pad LR Pad TB Radius Text Icon
4xs 16 2 0 12 12 12
3xs 20 4 0 12 12 14
2xs 24 6 2 12 12 16
xs 28 6 4 12 14 20
sm 32 8 4 12 14 20
md 36 10 4 14 14 20
lg 40 12 4 16 14 20

Figma `Tag/Size` node 33466:14364. `radius=round` forces pill shape for every size.

Usage

Use Tag for compact non-interactive labels, metadata, and status tags. Use Badge for numeric/status counters, ChipSelect for selectable filters/options, and a future RemovableTag for close-button behavior.

Examples

Examples 3
  • Core
  • Tone and style matrix
  • Size and radius scale

Figma source

Figma source 8 sets
Page
Tag
Sets
8
Primary set
Tag, label · 96 variants Open in Figma →
Showing: Tag, label
7 other sets
  • .Remove tag/Close icon/General 3 variants Figma →
  • .Remove tag/Close icon/Size 3 variants Figma →
  • .Tag content/Layout 12 variants Figma →
  • Removable tag/General 8 variants Figma →
  • Remove tag/Size 8 variants Figma →
  • Remove tag/User 6 variants Figma →
  • Tag/Size 14 variants Figma →

AI context

AI context

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

# Tag
Slug: `tag`
Domain: general · Category: display
Design: stable · Code: coded


## Description
Non-interactive label/tag primitive. Current code covers Tag, label + Tag/Size; removable/close-tag behavior remains future work.


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


## Props (6)
| Prop | Type | Default | Description |
|---|---|---|---|
| `tone` | `'brand' | 'progress' | 'info' | 'special' | 'success' | 'warning' | 'danger' | 'neutral' | 'neutral-dim' | 'neutral-inverse' | 'transparent' | 'ai'` | 'brand' |  |
| `variant` | `'light' | 'bold' | 'outline' | 'light-border'` | 'light' |  |
| `size` | `'4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg'` | '3xs' |  |
| `radius` | `'block' | 'round'` | 'block' |  |
| `leftIcon / rightIcon` | `ReactNode` | - |  |
| `children` | `ReactNode` | - |  |


## Axes
Variants: `light`, `bold`, `outline`
Tones: `brand`, `progress`, `info`, `special`, `success`, `warning`, `danger`, `neutral`, `neutral-dim`, `neutral-inverse`, `transparent`, `ai`
Sizes: `4xs`, `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`


## Usage
Use Tag for compact non-interactive labels, metadata, and status tags. Use Badge for numeric/status counters, ChipSelect for selectable filters/options, and a future RemovableTag for close-button behavior.


## Examples
- **Core**
- **Tone and style matrix**
- **Size and radius scale**


## Figma source
Page: Tag
Sets: 8
Primary: Tag, label
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=33467-45819

Related

  • 3

    Badge

    Coded
  • Featured
    New

    EyebrowBadge

    Code only
  • Section label

    SectionLabel

    Code only
  • DOL English logo

    Logo

    Coded

  • Avatar, User

    Coded
  • Field
    Value
    Name
    DOL Edu

    Table

    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).