Bileşenler

Hint

Yuvarlak rozetli kısa yardım ya da durum mesajı; form öğelerinin ve label’ların altında kullanılır.

TasarımcıGeliştirici

Playground

En az 8 karakter kullanın

TonBoyutMetin Form altında

Figma varyantı

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

Nötr yardım için Default; durum için Information, Error, Success ve Warning. Her ton rozeti ve metni renklendirir.

default

info

error

success

warning

Small form boyutudur ve varsayılandır; Medium tek başına duran mesajlar içindir.

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’da boşluk Default ve Information’da 12px, Error, Success ve Warning’de 16px. Kodda hepsi 12px (layout-small).
Warning ikonunun rengi, diğer on-renklerin aksine foreground/level-2 (Açık temada beyaz, Koyu temada siyah).

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