The Size system
size is one of the two cross-cutting axes every component shares (the other is variant). Three tiers — sm (24px) · md (32px, default) · lg (40px) — each
mapping a consistent control height, text, padding and icon scale. Every component accepts Size | Responsive<Size>.
Scalar sizes
sm Badge
md Badge
lg Badge
Responsive sizes
Pass a per-breakpoint map instead of a scalar. It resolves to Tailwind breakpoint classes (pure CSS, no JS) using our custom tiers + Tailwind's — exactly like DataTable column placement.
size={{ base: 'lg', xs: 'md', lg: 'sm' }}Current tier (resize the window): base — <480px → lg xs — ≥480px → md lg — ≥1024px → sm
These controls are lg on phones, shrink to md at ≥480px, and to sm at ≥1024px. Any tier is valid: base·4xs·3xs·2xs·xs·sm·md·lg·xl·2xl·3xl.