Badge

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

Slik tar du den i bruk

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/badge/badge.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<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>

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

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<span {...fs.badge()}>Under behandling</span>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Har du elementet som en variabel, setter du dem på det med setAttributes. Det er veien uten JSX, enten du nettopp lagde elementet eller fant det i en side serveren sendte:

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.

`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
Ren HTML

<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.

Klasser du kan style

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

Variabel	Standard
`--fs-badge-padding`	`var(--fs-spacing-0-5) var(--fs-spacing-2)`
`--fs-badge-radius`	`var(--fs-spacing-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.