Bileşenler
Label
Bir form alanını adlandırır. Info ikonu, alt yazı ya da hint ve opsiyonel işareti taşıyabilir.
Playground
Figma varyantı
🎛 Type=Default
with Form Element=False
Optional=FalseTipler
Default sadece label’dır. Icon arkasına bir info ikonu, Subtitle altına ikincil metin, Hint altına bir Hint ekler.
Kimseyle paylaşmayız
İş e-postanızı kullanın
Opsiyonel
Form öğesiyle
Doğrudan bir input’un üstündeyken label küçük yazı stilini kullanır. Tek satırlıysa üstte ve altta 4px, alt yazı ya da hint varsa altta grup içi boşluk alır.
Kimseyle paylaşmayız
İş e-postanızı kullanın
Opsiyonel
Tokenlar
| 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’dan koda
| Figma | React |
|---|---|
| 🎛 Type = Default | — |
| 🎛 Type = Icon | info |
| 🎛 Type = Subtitle | subtitle="…" |
| 🎛 Type = Hint | hint="…" |
| with Form Element = True | withFormElement |
| Optional + ⌙ Optional Text | optional="…" |