Bileşenler
Badge
Bir kaydın durumunu kısa bir metinle ve renkle gösterir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”Badge etkileşimli değildir. Metin akışı içinde duran bir <span> olduğu için fare, klavye ya da dokunma ile durumu değişmez.
| Durum | Destek | Görsel değişiklik | Token’lar |
|---|---|---|---|
| Varsayılan | Var | Ton ve varyanta göre renk | color-status-{ton}-background, -border, -foreground, -emphasis, -on-emphasis |
Kategori tonu: violet, teal, pink |
Var | Pastel etiket çifti; bold varyantta zemin ve metin yer değiştirir |
color-tag-{renk}-background, -foreground, -border |
| Üzerine gelme | Yok | Yok; <span> işaretçiye tepki vermez |
- |
| Basılı | Yok | Yok; tıklanamaz | - |
| Odak | Yok | Yok; odak almaz | - |
| Devre dışı | Yok | Yok; devre dışı olacak bir eylemi yok | - |
| Seçili | Yok | Yok; seçilebilir değil | - |
| Uzun metin | Kısmen | Metin tek satırda kalır (whitespace-nowrap), Badge genişler |
- |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
Yükseklik, sm |
16 px | badge-height-sm |
Yükseklik, md |
20 px | badge-height-md |
Yatay iç boşluk, sm |
6 px | badge-padding-inline-sm |
Yatay iç boşluk, md |
8 px | badge-padding-inline-md |
İkon tarafı iç boşluk, sm / md |
4 px / 6 px | badge-padding-inline-icon-sm, badge-padding-inline-icon-md |
| Köşe yarıçapı | Tam yuvarlak | badge-radius (radius.full) |
| İkon boyutu | 12 px | badge-icon-size |
| İkon ile metin arası | 4 px | space.xs |
| Kenarlık | subtle varyantta 1 px; bold varyantta saydam |
color-status-{ton}-border |
| Metin stili | 12 px / 16 px, orta kalınlık | label-sm |
Sayı rozeti en az yüksekliği kadar geniştir ve tam yuvarlaktır; iki yanda 4 px (space-xs) boşluk bırakır. Nokta rozeti 8 px çaplıdır (badge-dot-size) ve tonun emphasis rengini alır. outline rozetin zemini yoktur; subtle ile aynı pastel kenarlığı ve ton metnini taşır: durum tonlarında status-*-border ve status-*-foreground, violet, teal ve pink kategori renklerinde tag-*-border ve tag-*-foreground. Metin sayfa yüzeyinde en az 4.5:1 kontrastlıdır.
Token’lar
Bölüm başlığı “Token’lar”Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz. Her ton için aynı beş token vardır; tablo success tonunu gösterir.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-status-success-background | #def6e5#def6e5#def6e5 | #103620#103620#103620 | |
--bigbang-color-status-success-border | #c3eed1#c3eed1#c3eed1 | #0d5c34#0d5c34#0d5c34 | |
--bigbang-color-status-success-foreground | #0d5c34#0d5c34#0d5c34 | #c3eed1#c3eed1#c3eed1 | |
--bigbang-color-status-success-emphasis | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-status-success-on-emphasis | #092414#092414#092414 | #092414#092414#092414 | |
--bigbang-badge-height-sm | 16px16px16px | 16px16px16px | |
--bigbang-badge-height-md | 20px20px20px | 20px20px20px | |
--bigbang-badge-padding-inline-sm | 6px6px6px | 6px6px6px | |
--bigbang-badge-padding-inline-md | 8px8px8px | 8px8px8px | |
--bigbang-badge-padding-inline-icon-sm | 4px4px4px | 4px4px4px | |
--bigbang-badge-padding-inline-icon-md | 6px6px6px | 6px6px6px | |
--bigbang-badge-icon-size | 12px12px12px | 12px12px12px | |
--bigbang-badge-radius | 9999px9999px9999px | 9999px9999px9999px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| Üzerine gelme, basma, odak | Yok: Badge etkileşimli değildir | Azaltılacak bir şey yok |
| Giriş ve durum değişimi | opacity 0 → 1 (motion.reveal), motion-skeleton-reveal-duration (110 ms), easing-productive-enter; durum değişince yeni key ile yeniden çizilir |
Aynı kalır; yalnızca kısa bir opaklık geçişidir |
| Çıkış | Yok; Badge hemen kalkar | Azaltılacak bir şey yok |
Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.