Atoms · Primitives
Atomic UI Primitives
Indivisible building blocks styled with semantic design tokens, interactive focus states, and strict UI-type naming.
Button — Variants & States
Live @/design renderDefault / Primary
Secondary / Outline
Danger & Ghost
Button — Sizes & Loading State
Live @/design renderSize SM
Size Default (MD)
Size LG
With Spinner
Spinner & Progress Bar
Live @/design renderSpinners (sm, md, lg)
Loading data...
Progress Bars (Variants)
Primary Progress75%
Critical Threshold20%
Avatar & AvatarGroup
Live @/design renderAvatar Scales & Status
UA
UB
UG
UD
AvatarGroup (Stacked)
M1
M2
M3
+2
Tags & Interactive Chips
Live @/design renderSelectable Chips
Filter 1Filter 2Filter 3
Semantic & Removable Tags
Tag 1Tag 2Tag 3Static TagAlert Tag
Input — Text Inputs & States
Live @/design renderDefault State
Filled State
Disabled State
Badge — Semantic & Status Indicators
Live @/design renderSemantic Badges
Neutral
Success
Warning
Danger
Info
Status Badges
active
trial
suspended
churned
Tier Badges
free
pro
enterprise
Step Badges
123
Interactive Controls — Switch, Slider & Segmented
Live @/design renderSwitch
Slider (40%)
Segmented Control
Skeleton Loader & Tooltip
Live @/design renderSkeleton Loaders
Tooltip
import { … } from "@/design/atoms"
// source: design/atoms/index.ts