Component Catalog
The living parity reference. Each component is shown in its variants and states; everything is token-driven and accessible.
Foundations
Design tokens — the single source of truth for color, type, spacing, radius, and elevation.
Semantic colors
canvas
surface
muted
brand
brand-strong
success
warning
danger
info
inverse
Type scale (Thai + Latin)
Display 56
Heading 1 / 40
Heading 2 / 30
Heading 3 / 24
Heading 4 / 20
Body / 15 — ตัวอย่างข้อความภาษาไทย
Body small / 13
Caption / 12Overline / 11Spacing
1
2
3
4
5
6
8
10
12
16
Radius
xs
sm
md
lg
xl
2xl
Elevation
xs
sm
md
lg
xl
Forms & Actions
Core interactive controls with their variants, sizes, and states.
Button — variants
Button — sizes & states
Fields
We never share it.
Must be at least 8 characters.
Optional.
Checkbox / Switch
Radio group
Feedback & Overlays
Status messaging, loading states, and layered content with managed focus.
Alerts
Heads up
This is an informational message.
Saved
Your changes have been saved.
Check this
Your trial ends in 3 days.
Something went wrong
We couldn't process your request.
Loading & empty
No results
Try adjusting your filters.
Tooltip / Popover / Modal / Dialog
Navigation & Data Display
Structural navigation and components for presenting data.
Top navigation
Lexon
Breadcrumbs / Menu
Badges / Tags / Chips
BrandActivePendingErrorRemovable
Tabs
Overview tab content.
Table
| Role | |
|---|---|
| Aroon S. | Admin |
| Bua C. | Editor |
| Chai K. | Viewer |
Pagination
Patterns & Iconography
Higher-level compositions assembled from the components above.
Authentication
Faceted search
Iconography
search
home
check
close
plus
chevron-down
arrow-right
filter
sort
tag
bookmark
calendar
download
printer
share
eye
info
success
warning
danger