Skip to content
DOL Studio

SectionLabel

Design: extension Code: Code only labelheading

Live preview

Section label

Brand-tinted label

Divider label

With status dot

Import & files

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

Spec

Spec Props · Usage

Props

Prop Type Default Description
children ReactNode - —

Usage

`text-[11px] font-semibold uppercase tracking-wider text-slate-500`. Same treatment as Filters headers.

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

Examples

Examples 1
  • Uppercase group label

AI context

AI context

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

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


## Description
Uppercase label for form sections, filter headers, sidebar group labels.


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


## Props (1)
| Prop | Type | Default | Description |
|---|---|---|---|
| `children` | `ReactNode` | - |  |


## Usage
`text-[11px] font-semibold uppercase tracking-wider text-slate-500`. Same treatment as Filters headers.


## Examples
- **Uppercase group label**

Related

  • Tag label

    Tag

    Coded
  • 3

    Badge

    Coded
  • Featured
    New

    EyebrowBadge

    Code only
  • Eyebrow
    Section title
    Optional subhead

    SectionHeader

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