Labels

Medium-weight text that names things: field labels, button text, and short tags.

Fig. 1 Labels in place. The field label is label-md; the badge is label-sm.

Two sizes, medium weight

Labels are medium (500), so they hold their own beside regular body text without competing with semibold headings. label-md is the default; label-sm is for small buttons, chips, and compact metadata.

Project namelabel-md13 / 1.4 · 500

Workspacelabel-sm12 / 1.4 · 500

Fig. 2 The two label roles, measured.

Name, don’t explain

A label is a name: one to three words that say what the field holds or what the button does. Put any explanation in a description under the field, where it can wrap.

Do

A short name, with the hint underneath in body-sm.

Don’t

A sentence in the label wraps, and the field’s name gets lost in it.

Fig. 3 The same field, labeled two ways.

Build it

Pair label-md with a real label element connected to its control:

type-roles.tsx