Badge

Et lite merke som viser hvilken tilstand noe er i. Fargen styres med data-color.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/badge.css"

Farger

Eksempel

Kode

<span class="fs-badge">Under behandling</span>
<span class="fs-badge" data-color="success">Innvilget</span>
<span class="fs-badge" data-color="warning">Mangler vedlegg</span>
<span class="fs-badge" data-color="danger">Avslått</span>
<span class="fs-badge" data-color="neutral">Arkivert</span>

data-color	Brukes til
(utelatt)	Nøytral informasjon, pågående tilstand
success	Fullført, godkjent, aktiv
warning	Krever oppmerksomhet, men er ikke en feil
danger	Avslått, utløpt, kritisk
neutral	Inaktiv, arkivert, ukjent

I en liste

Merket står som regel sammen med det det sier noe om. Her i en List med skille mellom radene:

Eksempel

Kode

<ul class="fs-list" data-variant="divided">
<li>Faktura 2026-0481 <span class="fs-badge" data-color="success">Betalt</span></li>
<li>Faktura 2026-0482 <span class="fs-badge" data-color="danger">Forfalt</span></li>
</ul>

Skal merket stå til høyre i raden, er det appens oppsett som avgjør det, med display: flex og justify-content: space-between på li-elementet.

TypeScript

import { fs, type BadgeColor } from "@fristil/designsystem"

const merke = document.createElement("span")
merke.textContent = "Innvilget"

fs.setAttributes(merke, fs.badge({ color: "success" }))

Kommer fargen fra et API, valider den først:

const farge: BadgeColor = fs.badge.isColor(svar.status) ? svar.status : "info"

fs.setAttributes(merke, fs.badge({ color: farge }))

fs.setAttributes rydder også bort attributter fra forrige kall, så merket kan skifte farge uten at den gamle blir stående. Se Typesikker bruk.

Klasser du kan style

Klasse	Hva det er
.fs-badge	Selve merket. Fargen kommer fra data-color.

Variabel	Standard
--fs-badge-padding	var(--size-0-5) var(--size-2)
--fs-badge-radius	var(--size-4)

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

• Fargen alene sier ingenting til en skjermleser. Teksten må bære betydningen: «Avslått», ikke bare et rødt punkt.
• <span> inni en tekstlinje, <div> når merket står alene.
• Endrer merket seg mens siden står stille, legg role="status" og aria-live="polite" på elementet rundt.