Sizes

Everything in Bones comes in exactly two sizes: default and compact. No sm, md, lg, xl scale to memorize, and nothing to configure. One prop covers text, control height, and icons together.

The whole system

The three move together on purpose: 16px icons match 16px text, 14px icons match 14px text. Set size="compact" on a component and everything inside it, icons included, resizes as one.

<Button>Invite member</Button>
<Button size="compact">Filter</Button>

Sizes nest cleanly

Size is resolved per component, not inherited from the page. A default-size component inside a compact one (or the reverse) keeps its own size, so dense toolbars and roomy forms can mix freely. The size prop never cascades; to change the default for a whole region, remap the tokens instead (see Theming).

Easy to retune

The sizes are tokens, so adjusting the whole library is one override, not a refactor. Want denser compact controls everywhere? Change one line:

:root {
  --ub-control-height-compact: 1.625rem; /* 26px instead of 28px */
}

Components read the tokens; they never hardcode a height, font size, or icon size. That's the deal across all of Bones: understand one token, and you understand it everywhere it appears.