Stabil

Badge

Badge brukes for å merke elementer med status, kategori eller annen metadata. Den er kompakt og visuelt distinkt med avrundede hjørner og semantiske farger.

Utforsk

Forhåndsvisning

Badge

variant

children

<Badge>Badge</Badge>

Importering

import { Badge } from "@kilden/designsystem";

Varianter

default, secondary og outline – nøytrale markører, f.eks. kategorier og versjonsnumre.
success, warning, danger og info – semantiske statuser.

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">v2.1.0</Badge>
<Badge variant="success">Publisert</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="danger">Avviklet</Badge>
<Badge variant="info">Ny</Badge>
</div>

Typiske bruksområder

<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
{/* Versjonsnummer */}
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <span style={{ fontWeight: 600 }}>Button</span>
  <Badge variant="outline">v1.2.3</Badge>
</div>
{/* Status */}
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <span style={{ fontWeight: 600 }}>Komponent</span>
  <Badge variant="success">Stabil</Badge>
</div>
{/* Kombinert med knapp */}
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <Button variant="secondary">
    Varsler <Badge style={{ marginLeft: "0.5rem" }}>3</Badge>
  </Button>
</div>
</div>

Bruksanbefalinger

Stabilv2.0

Bruk for kortfattet metadata

Badge passer for statuser, versjoner, kategorier og antall — altså kort og beskrivende informasjon.

Denne teksten er altfor lang til å være i en badge-komponent

Ikke bruk for lange tekster

Badge er ment for korte labels. For lengre meldinger, bruk Alert eller en vanlig tekst.

AktivVenterFeil

Bruk semantiske farger bevisst

Bruk success for positive statuser, warning for ting som krever oppmerksomhet, og danger for feil eller fjerning.

NyOppdatertAktivBetaAnbefaltViktig

Ikke bruk for mange badges sammen

For mange badges skaper visuell støy. Velg de viktigste og hold det ryddig.

Tilgjengelighet

Badge er et <span> uten egen rolle, og leses opp som vanlig tekst
Ikke la fargen alene bære betydningen. Teksten i badgen må beskrive statusen (f.eks. «Avviklet», ikke bare en rød badge)
Badges med tall eller forkortelser trenger ofte mer kontekst for skjermlesere, f.eks. <Badge>3<span className="sr-only"> uleste varsler</span></Badge>
Badge er ikke interaktiv. Bruk Button eller Chip hvis brukeren skal kunne klikke på den
De semantiske variantene bruker kontrastfarger fra design tokens

Props

Prop	Type	Default	Beskrivelse
`variant`	`"default" \| "secondary" \| "outline" \| "success" \| "warning" \| "danger" \| "info"`	`"default"`	Visuell stil