Components

Hint

A short helper or status message with a round badge, used under form elements and labels.

DesignerDeveloper

Playground

Use at least 8 characters

ToneSizeText With form

Figma variant

👕 Size=Small
🎛 Type=Default
with Form=False

Default for neutral help; Information, Error, Success and Warning for status. Each tone colors the badge and the text.

default

info

error

success

warning

Small is the form size and the default; Medium is for standalone messages.

Medium

Small

Size	Badge	Gap	Text	Glyph
medium	24px	`--layout-small`	ui/text/regular	12px
small	16px	`--layout-tiny`	ui/text small/regular	12px

Tone	Badge	Glyph	Text
default	`--color-surface-level-3`	`--color-foreground-medium-emphasis`	`--color-foreground-medium-emphasis`
info	`--color-info`	`--color-on-info`	`--color-on-info`
error	`--color-error`	`--color-on-error`	`--color-error`
success	`--color-success`	`--color-on-success`	`--color-success`
warning	`--color-warning`	`--color-foreground-level-2`	`--color-warning`

Medium uses a 12px gap for Default and Information and 16px for Error, Success and Warning. Code uses 12px (layout-small) for all.
The warning glyph uses foreground/level-2 (white in Light, black in Dark), unlike the other on-colors.

Figma	React
🎛 Type = Default / Information / Error / Success / Warning	`tone='default' / 'info' / 'error' / 'success' / 'warning'`
👕 Size = Medium / Small	`size='medium' / 'small'`
with Form = True	`withForm`