Badge
@/components/ui/Badge
Liten pille (radius full) for ETT kort tilstandsord — prioritet, status eller en nøytral kategori.
Når brukes den
Bruk for ett kort tilstandsord i en rad eller et kort (prioritet, status som «OK»/«Utløpt», en kategori).
Prioritetsdomenet (akutt/hoy/middels/lav) er ALIASER over fargeskalaen (akutt→red, hoy→amber, middels→gray, lav→teal) — bruk dem i prioritet-sammenheng, de rene hue-variantene ellers.
accent for en nøytral-blå tilstand som verken er prioritet eller suksess/feil, f.eks. «Under behandling» eller «Anbefalt». inverted for en pille på en mørk/kontrastflate.
contrast="low" (standard) for all tekst — den er kalibrert for AA. contrast="high" holder KUN ~3:1: bruk den på ikoner eller store etiketter, aldri alene på liten tekst.
Ikke bruk til en handling — det er Button/IconButton — eller til en fritekstetikett uten tilstandsbetydning.
Eksempler
Prioritet (aliaser)
De fire prioritetsnivåene — hvert er et alias over en fargefamilie, se under.
<Badge variant="akutt">Akutt</Badge> <Badge variant="lav">OK</Badge>
Fargeskalaen (low contrast, standard)
De åtte kategoriske fargene, pluss inverted og accent — bg hue-100/tekst hue-900, kalibrert for AA på liten tekst.
<Badge variant="teal">Fullført</Badge>
Høy kontrast (solid)
Solid bg hue-700 + hvit tekst (amber: sort). Holder kun ~3:1 — bruk på ikoner eller store etiketter, ikke som eneste kilde for liten tekst.
<Badge variant="red" contrast="high">Akutt</Badge>
Størrelser
Med ikon
<Badge variant="teal" icon={Fullfort}>Fullført</Badge>Lang tekst i trang plass
Merket bærer normalt 1–2 ord, men klippes med ellipse i stedet for å sprenge layouten når innholdet unntaksvis er langt.
I kontekst
Faktura #4021
Props
Sveip tabellen for å se hele innholdet