Körsatiş · molecule

Belgi (badge)

Holat yoki toifa yorliği. Ohanglar: standart, info, brand, success, warning, error; köriniş: yengil (standart), solid, outline; ölçam sm/lg; ikonli; nuqtali (data-marker="dot") va son (data-type="count").

beta0.1.0 danyangilandi 0.22.0.fx-badgeFaqat CSS

Qoralama Tölangan Muddati ötgan Faol 12 RedFox WebFox Yangi Faol Xato Kutilmoqda Qoralama

Variantlar

Atribut	Qiymatlar	Standart
`data-tone`	`neutral` `info` `brand` `success` `warning` `error`	`neutral`
`data-marker`	`none` `dot`	`none`
`data-type`	`label` `count`	`label`
`data-color`	`none` `yellow` `pink` `blue` `coral` `green` `purple`	`none`
`data-style`	`subtle` `solid` `outline`	`subtle`
`data-size`	`sm` `md` `lg`	`md`
`data-count`	sanoq: bir xonali — töliq doira, uzunroği — kapsula (ezilgan doira yöq)	—

Anatomiya

root.fx-badgeşart

Kod

AI uçun: qaçon işlatiladi

Işlating

Holat yoki toifani qisqa yorliq bilan körsatiş.

Işlatmang

Bosiladigan filtr → tabs
Holatni faqat rang bilan bildirmang — matn ham bölsin.
Kategoriya rangiga ma'no yuklamang (xato, ogohlantiriş) — buning uçun data-tone.

npx foxui add badge

<span class="fx-badge">Qoralama</span>
<span class="fx-badge" data-tone="success">Tölangan</span>
<span class="fx-badge" data-tone="error">Muddati ötgan</span>
<span class="fx-badge" data-tone="success" data-marker="dot">Faol</span>
<span class="fx-badge" data-type="count">12</span>
<span class="fx-badge" data-color="purple">RedFox</span>
<span class="fx-badge" data-color="blue">WebFox</span>
<span class="fx-badge" data-tone="info">Yangi</span>
<span class="fx-badge" data-tone="success" data-style="solid">Faol</span>
<span class="fx-badge" data-tone="error" data-style="solid" data-size="sm">Xato</span>
<span class="fx-badge" data-tone="warning" data-style="outline">Kutilmoqda</span>
<span class="fx-badge" data-style="outline" data-size="lg">Qoralama</span>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-category-blue-subtle --fx-bg-category-coral-subtle --fx-bg-category-green-subtle --fx-bg-category-pink-subtle --fx-bg-category-purple-subtle --fx-bg-category-yellow-subtle --fx-bg-error-solid --fx-bg-error-subtle --fx-bg-info-subtle --fx-bg-muted --fx-bg-success-subtle --fx-bg-surface --fx-bg-warning-subtle --fx-border-width-default --fx-ease-standard --fx-fg-error --fx-fg-info --fx-fg-success --fx-fg-warning --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-base --fx-radius-circle --fx-radius-tag --fx-size-icon-md --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-on-brand --fx-text-on-error --fx-text-primary --fx-text-secondary

Şu toifadan

Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.Fon: naqş va effektlarHero, böş holat va CTA bloklari orqasidagi bezak fon (4.61): nuqtalar, katak yoki qiya çiziqlar — faqat CSS gradient va mask, rasm faylisiz.

Belgi (badge)

Variantlar

Anatomiya

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik