Theme: ← Übersicht Tokens

Badge

Status- oder Kategorie-Kennzeichen. BREAKING 2.0.0: Prop tone heißt jetzt variant (Migration 1-to-2 vorhanden)

UI Elements v2.1.0 Status WebsiteAppDesktopE-Mail ui.badge

Beispiele

Neutral
Entwurf
Erfolg
Veröffentlicht
Warnung
Veraltet
Fehler
Fehlgeschlagen
Info
Beta
Klein + Outline
Beta

Eigenschaften

PropTypDefaultBuilder-Label
label *string—Beschriftung
variantstring: neutral | success | warning | danger | info"neutral"Variante
dotbooleanfalseStatus-Punkt zeigen
sizestring: sm | md"md"Größe
outlinebooleanfalseNur Rahmen (transparent)

* Pflicht-Prop

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

TokenDefault
--badge-backgroundvar(--color-surface-sunken)
--badge-colorvar(--color-text-muted)
--badge-bordervar(--color-border-default)

Genutzte Design-Tokens

border.hairlinecolor.border.defaultcolor.status.dangercolor.status.danger-surfacecolor.status.infocolor.status.info-surfacecolor.status.successcolor.status.success-surfacecolor.status.warningcolor.status.warning-surfacecolor.surface.sunkencolor.text.mutedfont.family.defaultleading.baseradius.fullsize.05size.1size.2text.xsweight.semibold