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
TopBar — Date + View Toggle
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