Skip to content
DOL Studio

KidBadge

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

Live preview

Live preview not yet wired for slug (none).

80 components have live demos. If this slug should have one, add it to DEMO_REGISTRY in ComponentDemo.tsx.

Import & files

Import
import { KidBadge } from "@/components/Domains/DolKid/ui/KidStatusTag";
Source file
components/Domains/DolKid/ui/KidStatusTag.tsx

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. 

# KidBadge
Slug: `badge`
Domain: kid · Category: display
Design: stable · Code: coded


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


## Import
```ts
import { KidBadge } from "@/components/Domains/DolKid/ui/KidStatusTag";
```
Source: `components/Domains/DolKid/ui/KidStatusTag.tsx`


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

Related

  • 3

    Badge

    Coded
  • ✓ Hoàn thành

    KidStatusTag

    KIDCode only

  • KidAvatar

    KIDCoded
  • Tag label

    Tag

    Coded
  • Notice

    Alert

    Coded
  • Featured
    New

    EyebrowBadge

    Code only

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