Skip to content

Design system

Documentation

DesignFoundations / Sizing

Foundations / Sizing

Stable

Sizing

A small set of control and icon sizes keeps interfaces aligned without forcing every component to be the same density.

On this page

Control scale

Use the control height that matches the surrounding density. Button already consumes this scale through its size variants.

--size-control-xs24px
--size-control-sm28px
--size-control-md32px
--size-control-lg36px
--size-control-xl40px
SizeUse forExamples
xsDense toolbars and compact rows.Icon actions beside metadata.
smSecondary actions and filters.Toolbar buttons.
mdDefault application controls.Button and menu trigger defaults.
lg / xlProminent actions or touch-heavy flows.Primary call to action.

Icons and targets

Icon geometry follows the control rather than competing with its label. Standalone interactive controls must have a target large enough to use comfortably, even when the visible glyph is smaller.

TokenValueUse
--size-icon-xs12pxCompact icon-only control.
--size-icon-sm14pxSmall text-adjacent icon.
--size-icon-md16pxDefault Button and menu icon.
--size-icon-lg / xl20px / 24pxNavigation, empty states, or illustration emphasis.

Guidance

Do

Keep the visible icon optically centered while the Button supplies the full control target.

Do not

Make an icon-only control smaller than its neighboring target just to fit more controls on one row.

Spacing between controls belongs to the Spacing scale; sizing answers how large the control itself should be.