Bileşenler
Chips
Filtreler, seçimler ve girilen değerler için küçük bir hap. Açılıp kapanabilir, anahtar gösterebilir ve kaldırılabilir.
Playground
Figma varyantı
💅 Style=Default
👕 Size=Medium
Select=False
Show Icon=False
Show Icon (R)=False
Key=False
Remove=FalseTipler
Beş ton. Seçili olmayan chip’ler soft tonu ve shade metni, seçili olanlar tonu ve on-rengini kullanır. Default seçilince primary soft olur.
DefaultPrimarySuccessErrorWarning
DefaultPrimarySuccessErrorWarning
Boyutlar
Medium ve Small gövde metnini, Tiny küçük metni, Micro footnote’u kullanır.
MediumSmallTinyMicro
| Size | Height | Pill padding | Text padding | Text | Icon |
|---|---|---|---|---|---|
| medium | 40px | --space-micro | --space-micro --space-small | ui/text/regular | 20px |
| small | 32px | --space-micro 6px | 0 --space-tiny | ui/text/regular | 16px |
| tiny | 24px | 0 --space-atom | --space-micro | ui/text small/regular | 12px |
| micro | 16px | 0 --space-atom | --space-atom --space-micro | ui/footnote/regular | 12px |
Anahtar ve kaldırma
Anahtar kısmı metnin önüne gelir (“Durum: Aktif” gibi filtreler için); kaldırma butonu metnin arkasına.
StatusActiveStatusDoneIstanbul
Tokenlar
| State | Background | Text | Key background / text |
|---|---|---|---|
| default | --color-surface-level-3 | --color-foreground-high-emphasis | --color-surface-level-4 / --color-foreground-high-emphasis |
| default selected | --color-primary-soft | --color-primary | --color-surface-level-4 / --color-foreground-high-emphasis |
| {tone} | --color-{tone}-soft | --color-{tone}-shade | --color-{tone}-shade / --color-{tone}-soft |
| {tone} selected | --color-{tone} | --color-on-{tone} | --color-surface-level-4 / --color-foreground-high-emphasis |
Figma notları
- Anahtar metni Neue Haas Grotesk Text Pro 14 Medium; tip ölçeğinin ve font değişkeninin dışında. Kod her boyutun bold UI stilini kullanır (ui/text/bold, ui/text small/bold, ui/footnote/bold).
- Seçili her chip, tonu ne olursa olsun nötr anahtarı korur (surface/level-4 ve high-emphasis metin).
- Figma’da hover, focus ya da disabled durumu yok. Kod klavye kullanıcıları için primary focus halkasını ekler.
- Kaldırma ikonu, Figma’daki gibi Icon/clear.
- Seçili olmayan Primary Micro hapı her yandan 2px, metni 0 4px boşlukla; diğerleri hapı 0 2px, metni 2px 4px boşlukla sarar; ikisi de 16px yüksekliğinde çıkar.
Figma’dan koda
| Figma | React |
|---|---|
| 💅 Style = Default / Primary / Success / Danger / Warning | tone='default' / 'primary' / 'success' / 'error' / 'warning' |
| 👕 Size = Medium / Small / Tiny / Micro | size='medium' / 'small' / 'tiny' / 'micro' |
| Select = True | selected |
| Key + ⮑ Key | keyLabel="…" |
| Show Icon / Show Icon (R) | iconLeft={<Icon… />} / iconRight={<Icon… />} |
| Remove = True | onRemove={…} |