Bileşenler

StatusBadge

Bir durumu, ortak durum sözlüğünden ton, simge ve metinle gösterir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Destek	Görsel değişiklik	Token’lar
Varsayılan (`subtle`)	Var	Duruma göre açık zemin, kenarlık ve metin	`color-status--background`, `color-status--border`, `color-status-*-foreground`
Vurgulu (`bold`)	Var	Dolu zemin, saydam kenarlık, zemin üstü metin	`color-status--emphasis`, `color-status--on-emphasis`
Üzerine gelme, basılı, odak	Yok	Rozet etkileşimsizdir	-
Devre dışı	Yok	Devre dışı durumu yoktur	-
Bilinmeyen kod	Var	Nötr ton, simgesiz, ham kod	`color-status-neutral-*`

Sözlük

Durum	Ton	Simge	Metin (TR / EN)
`draft`	nötr	`pencil`	Taslak / Draft
`pending`	uyarı	`clock`	Beklemede / Pending
`in-review`	bilgi	`eye`	İnceleniyor / In review
`active`	marka	`circle-check`	Etkin / Active
`approved`	başarı	`check`	Onaylandı / Approved
`completed`	başarı	`circle-check`	Tamamlandı / Completed
`paused`	nötr	`minus`	Duraklatıldı / Paused
`cancelled`	nötr	`circle-x`	İptal edildi / Cancelled
`rejected`	hata	`x`	Reddedildi / Rejected
`failed`	hata	`circle-alert`	Başarısız / Failed
`expired`	uyarı	`calendar`	Süresi doldu / Expired
`archived`	nötr	`file`	Arşivlendi / Archived

Ö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`
Köşe yarıçapı	Tam yuvarlak	`badge-radius`
Simge	12 px	`badge-icon-size`
Simge ile metin arası	4 px	`space-xs`
Metin stili	12 px, yarı kalın	`label-sm`

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Örnek	Açık mod	Koyu mod
`--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-radius`		`9999px9999px9999px`	`9999px9999px9999px`
`--bigbang-badge-icon-size`		`12px12px12px`	`12px12px12px`
`--bigbang-color-status-success-background`		`#def6e5#def6e5#def6e5`	`#103620#103620#103620`
`--bigbang-color-status-success-foreground`		`#0d5c34#0d5c34#0d5c34`	`#c3eed1#c3eed1#c3eed1`
`--bigbang-color-status-warning-background`		`#ffebd5#ffebd5#ffebd5`	`#422702#422702#422702`
`--bigbang-color-status-warning-foreground`		`#6c4300#6c4300#6c4300`	`#fddbb4#fddbb4#fddbb4`
`--bigbang-color-status-danger-emphasis`		`#e1595b#e1595b#e1595b`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-status-danger-on-emphasis`		`#331212#331212#331212`	`#331212#331212#331212`

Hareket ve etkileşim

Etkileşim	Hareket	Azaltılmış hareket
İlk gösterim	Opaklık 0 → 1, `motion-skeleton-reveal-duration` (`motion.reveal`)	Çok kısa solma
Durum değişimi	Rozet `key={status}` ile yeniden oluşturulur; yeni durum aynı solma ile belirir	Çok kısa solma
Üzerine gelme, basma, odak	Yok; rozet etkileşimsizdir	-

Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.