Bileşenler
Popover
Bir butondan açılan, ek bilgi ya da kontrol taşıyan küçük panel. Tooltip’ten farklı olarak kapatılana kadar açık kalır.
Playground
3 kişiyle paylaşıldı
Bağlantıya sahip herkes bu raporu görebilir.
Figma varyantı
👉 Position=Top
🎛 Type=DefaultTipler
Default, kapatma butonlu bir başlık ve bir satır metin taşır. HTML, profil kartı gibi herhangi bir içerik taşır. İkisi de oklu on iki konumda gelir.
Tokenlar
| Part | Token |
|---|---|
| Background | --color-surface-level-1 |
| Line | --border-width --color-surface-level-4 |
| Shadow | --shadow-form-level-1 |
| Padding | --space-medium |
| Radius | --radius-form-element-small |
| Title / text | --text-ui-text-bold / --text-ui-text-small-regular |
Figma notları
- 👉 Position okun kenarını adlandırır; Position=Bottom butonunun üstündeki popover’dır (placement="top"). Kodda varsayılan konum butonun altıdır.
- Başlık tip ölçeğinin dışındaki Neue Haas 14 Medium; kod ui/text/bold kullanır.
- Ok iki vektörden oluşuyor (18×8); kod 45° döndürülmüş 12px bir kare çizer.
- z-index tokenı yok; popover absolute konumlanır ve kayan bir üst öğe tarafından kesilebilir.
Figma’dan koda
| Figma | React |
|---|---|
| 🎛 Type = Default | title="…" + children |
| 🎛 Type = HTML | children={<…/>} |
| 👉 Position = Top / Bottom / Left / Right (+ edges) | placement='bottom' / 'top' / 'right' / 'left' (+ -start / -end) |