Skip to content
DOL Studio

EyebrowBadge

Design: extension Code: Code only labelkicker

Live preview

Tones

6 tones — brand / info / success / warning / danger / neutral. Pick by status semantics (brand=primary product, success=stable, danger=critical).
BrandInfoSuccessWarningDangerNeutral

Sizes

3 sizes — 10px (compact) / 11px (default) / 12px (display). Brand exemplar; tone stays consistent across sizes.
10px · Compact eyebrow11px · Default eyebrow12px · Display eyebrow

Compositions

4 composition patterns — alone (text-only) / with leading status dot / with trailing Badge component / kicker over heading (canonical use). CompositionList pattern for heterogeneous usage scenes.
Alone (text-only)
Featured
With leading status dot
Stable release
With trailing Badge component
NewBeta
Kicker over heading (canonical use)
Khoá học · IELTS

Lộ trình 12 tuần đến band 7.0

Landing section use-case

Production landing — eyebrow kicker + h2 + description. Eyebrow gives the section context-tag (e.g., 'Tại sao DOL?') above the heading.
Tại sao DOL?

Học IELTS hiệu quả với phương pháp Linearthinking

Phương pháp độc quyền giúp học viên tăng band điểm nhanh — verified trên 50.000+ học viên trong 8 năm.

Import & files

Import
import { EyebrowBadge } from "@/components/ui/EyebrowBadge";
Source file
components/ui/EyebrowBadge.tsx

Spec

Spec Props · Usage

Props

Prop Type Default Description
tone 'neutral' | 'brand' | 'amber' | 'blue' | 'emerald' 'neutral' —
icon ReactNode - —

Usage

Max 3 words, uppercase, tracking-wider. Body text slop-10 if used as paragraph treatment.

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 1
  • Above a heading

AI context

AI context

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

# EyebrowBadge
Domain: general · Category: display
Design: extension · Code: code-only


## Description
Small uppercase label above a heading - category marker, eyebrow text. Reads as kicker, not body.


## Import
```ts
import { EyebrowBadge } from "@/components/ui/EyebrowBadge";
```
Source: `components/ui/EyebrowBadge.tsx`


## Props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
| `tone` | `'neutral' | 'brand' | 'amber' | 'blue' | 'emerald'` | 'neutral' |  |
| `icon` | `ReactNode` | - |  |


## Usage
Max 3 words, uppercase, tracking-wider. Body text slop-10 if used as paragraph treatment.


## Examples
- **Above a heading**

Related

  • Tag label

    Tag

    Coded
  • 3

    Badge

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