Foundations
Control sizes
One size scale for every control, so mixed rows line up.
Buttons, inputs, input groups, number inputs, selects, date pickers and
segmented controls share one size prop with four steps. Each step sets
the height, the label text and the icon together.
| Size | Height | Text | Icon | Use |
|---|---|---|---|---|
xs | 24px | 12px | 12px | Chips inside dense rows |
sm | 32px | 14px | 16px | Toolbars, table filters, search, period pickers |
default | 40px | 15px | 16px | Forms, primary page actions |
lg | 48px | 16px | 16px | Hero calls to action, docks |
xs · 24px · 12px
sm · 32px · 14px
default · 40px · 15px
lg · 48px · 16px