Alpha

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

Badge

variant

children

<Badge>Badge</Badge>

Importering

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

Varianter

Default

<Badge>Default</Badge>

Secondary

<Badge variant="secondary">Secondary</Badge>

Outline

<Badge variant="outline">Outline</Badge>

Semantiske varianter

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
<Badge variant="success">Publisert</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="danger">Avviklet</Badge>
<Badge variant="info">Ny</Badge>
</div>

Interaktivt eksempel

<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">Stabil</Badge>
<Badge variant="warning">Eksperimentell</Badge>
<Badge variant="danger">Fjernet</Badge>
<Badge variant="info">Oppdatert</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.

Props

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