Sizes

The principle

A button next to a select next to a tab should land at the same height. Each size scales text, icons, and padding together.

Use compact controls in dense, data-heavy regions. Default gives everyday controls more room.

Typography scale

Compact reduces type size and line height together, preserving the hierarchy at a smaller size.

See the full scale in Typography. Press S outside a field to switch between densities.

Compact regions

Set density on an ancestor to scale a whole group. Switch the example and compare the measured control height.

Token reference

Inspect either toolbar row to measure the controls alongside the tokens below.

Regional density reference

Use data-density on an element to set the inherited CSS tokens. A nested region can override its ancestor’s density.

Component size prop

Use the size prop to override density for one control.