Tag
Tag brukes til å vise kategorier, statuser og etiketter. De er kun visuelle elementer — ikke bruk Tag som knapper eller lenker. For klikkbare filtre, bruk Chip-komponenten i stedet.
AktivUtløper snartKansellertNyStandard
Viktig informasjon
Tags er dekorative og ikke interaktive. Sørg for at taggteksten gir mening uten ekstra kontekst.
Props
Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
childrenReact | React.ReactNode | Ja | — | Etikettteksten. Hold den kort — maks 3–4 ord. |
variantReact | "neutral" | "info" | "success" | "warning" | "error" | Nei | "neutral" | Fargevarianten. |
Eksempler
Alle varianter
Semantiske varianter matcher Message-farger for konsistens.
NøytralInfoSuksessAdvarselFeil
Tags for kategorisering
Typisk bruksmønster: gruppe av tags som beskriver innholdskategorier.
ReactTypeScriptNext.jsNytt
Tag som statusindikator i kort
Typisk bruk: Tag i kortoverskrift for å vise avtale- eller forsikringsstatus.
Bilforsikring kasko
Aktiv- Registreringsnummer
- AB 12345
- Månedspremie
- 542 kr
- Neste forfall
- 15. april 2026