Components

Label

Names a form field. Can carry an info icon, a subtitle or a hint, and an optional marker.

DesignerDeveloper

Playground

TypeLabelOptional text With form element

Figma variant

🎛 Type=Default
with Form Element=False
Optional=False

Types

Default is the label alone. Icon adds an info icon after it; Subtitle adds secondary text under it; Hint adds a Hint under it.

We never share it

Use your work email

EmailOptional

With form element

Directly above an input, the label uses the small text style. A single row gets 4px above and below; a label with subtitle or hint gets the in-group gap below.

We never share it

Use your work email

EmailOptional

Tokens

Part	Text style	Color
Label	ui/text/regular (with form: ui/text small/regular)	`--color-foreground-high-emphasis`
Optional, Subtitle	ui/text small/regular	`--color-foreground-medium-emphasis`
Info icon	12px	`--color-foreground-medium-emphasis`
Gaps	`--layout-tiny · --space-micro · --space-form-ingroup-gutter`

Figma to code

Figma	React
🎛 Type = Default	`—`
🎛 Type = Icon	`info`
🎛 Type = Subtitle	`subtitle="…"`
🎛 Type = Hint	`hint="…"`
with Form Element = True	`withFormElement`
Optional + ⌙ Optional Text	`optional="…"`