Order number

Design: Stable Code: Coded listnumeric 3 Figma sets Element/Order number @dol/ui/order-number

Live preview

Solid variant (default)

8 tones — neutral / brand / info / special / warning / success / danger / sky. Solid fill + white numeral. Default variant for step indicators.

1

neutral

Code

2

brand

Code

3

info

Code

4

special

Code

5

warning

Code

6

success

Code

7

danger

Code

8

sky

Code

Soft variant

8 tones — neutral / brand / info / special / warning / success / danger / sky. Light-tinted background (tone-50) + colored numeral (tone-700). Softer alternative for chip-density contexts.

1

neutral

Code

2

brand

Code

3

info

Code

4

special

Code

5

warning

Code

6

success

Code

7

danger

Code

8

sky

Code

Outline variant

8 tones — neutral / brand / info / special / warning / success / danger / sky. White background + colored border + colored numeral. For light surfaces where solid fill would over-dominate.

1

neutral

Code

2

brand

Code

3

info

Code

4

special

Code

5

warning

Code

6

success

Code

7

danger

Code

8

sky

Code

Sizes

3 sizes — sm (24px) / md (32px default) / lg (40px). Numeral scales proportionally.

1

sm

Code

1

md

Code

1

lg

Code

Plain variant

No container — bare numeral inline with surrounding text. Use for 'Step N of M' patterns.

Step1of5

Import & files

Import

import { Order number } from "@dol/ui/order-number";

Source file

packages/@dol/ui/src/order-number/OrderNumber.tsx

Figma source

Figma source 3 sets

Page

Order number

Sets

3

Primary set

Element/Order number · 64 variants Preview here ↑ Open in Figma →

Showing: Element/Order number

Load Figma preview · embed.figma.com

2 other sets

• .Element/Order number/Layout 6 variants Preview here ↑ Figma →
• Element/Order number nhỏ xíu 4 variants Preview here ↑ Figma →

AI context

AI context

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

# Order number
Slug: `order-number`
Domain: general · Category: display
Design: stable · Code: coded

## Description
Numbered list item indicator with size variants.

## Import
```ts
import { Order number } from "@dol/ui/order-number";
```
Source: `packages/@dol/ui/src/order-number/OrderNumber.tsx`

## Figma source
Page: Order number
Sets: 3
Primary: Element/Order number
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=12517-139330

Related

• 

  Logo

  Coded
• DL

  Avatar, User

  Coded
• Tag label

  Tag

  Coded
• Field

  Value

  Name

  DOL Edu

  Table

  Coded
• ---

  Divider

  Coded
• 3

  Badge

  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.

Previous

Divider

display

Next

Badge

display

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