Primitives

Design system primitive components. All styles driven by ds-* tokens, zero hardcoded values.

Button — Variants

Button — Sizes

Button — States

Button — Icon

Button — With Icon

Badge — Status

UpcomingSeatedCompletedNo-ShowCancelledNeutral

Badge 变体通常由业务 token (biz-tokens.css) 定义颜色,如 ds-badge--upcoming、ds-badge--seated 等

Input — States

Label
Error
This field is required
Disabled

Chip — Filter

Card — Variants

DefaultBorder only
shadow带阴影
selected选中态
interactive可交互(hover 变边框)

RadioCard — Selection

Option A
Unselected state
Option B
Selected state

Divider

Subtle

Strong

Segmented Control

Section Title

Party SizeAvailable Time SlotsDeposit Payment

Modal

Confirm Action

Are you sure you want to proceed?

TopBar — Date + View Toggle

Tue, Jan 27

Tab Bar — Bottom Navigation

FakeTextarea

This is an editable note area with some content.
Add a note...

SearchInput

Typography Scale

2xl / 20px / Bold — Page Titlexl / 16px / SemiBold — Section Titlelg / 14px / Medium — Card Titlebase / 13px / Regular — Body Textsm / 12px — Secondary Textxs / 11px — Label / Caption2xs / 10px — Timestamp / Annotation