Tag
TODO — diskusjon: farget subtle-tekst per status
Etter Figma-designet skal subtle-varianten ha farget tekst per status (blå på
lyseblå, grønn på lysegrønn osv.). Implementasjonen bruker i stedet mørk tekst i
alle subtle-statuser: de mettede fyll-fargene (-550) gir kun 3.3–3.9:1 mot
pastell-flatene og bryter WCAG 1.4.3 (4.5:1), og systemet mangler
foreground-tokens for info, warning og neutral (kun success/danger
finnes). En mørkere per-status foreground (~-700, 7–11:1) ville latt oss matche
Figma WCAG-trygt. Avventer beslutning om å legge til de manglende tokenene — se
Status-foreground i fargedokumentasjonen.
Et designsystem som gjør nettopp dette:
Digdir Designsystemet — Tag
bruker data-color med tonet flate og mørkere tekst i samme fargetone per status
(og en outline-variant for enda roligere uttrykk).
Tag er en liten, ikke-interaktiv etikett som merker eller kategoriserer innhold — for eksempel en status, en egenskap eller et nøkkelord. Taggen bærer betydningen i teksten sin, og fargen støtter opp om hvilken type informasjon det er.
Egnet til
- Vise status på et element (f.eks. «Utløpt», «Ny», «Til behandling»)
- Merke eller kategorisere innhold med korte nøkkelord
- Fremheve en egenskap eller et attributt kompakt
- Gi et visuelt hint om alvorlighetsgrad sammen med tekst
Uegnet til
- Handlinger brukeren kan klikke på — bruk Chip eller Button
- Fjernbare valg eller filtre — bruk Removable chip
- Lange tekster eller forklaringer — taggen er ment for korte etiketter
- Å formidle status med farge alene uten forklarende tekst
Varianter
Taggen har fem semantiske statuser — neutral, info, success, warning og danger — i to visuelle profiler:
- Emphasis (standard): mettet flate med invers (lys) tekst. Brukes når taggen skal trekke blikket.
- Subtle: pastell-flate med mørk tekst og farget border. Roligere uttrykk som passer i tettpakket innhold.
I HTML velges status med data-status, profil med data-variant og størrelse med data-size. I React er dette henholdsvis variant-, type- og size-props.
Eksempel
Result
Loading...
Kode
Live Editor
<Tag variant="info">Ny</Tag>
Alle statuser
Hver status finnes i begge profiler. Emphasis øverst, subtle under.
Result
Loading...
Kode
Live Editor
<VStack gap="md"> <HStack gap="sm"> <Tag variant="neutral">Neutral</Tag> <Tag variant="info">Info</Tag> <Tag variant="success">Success</Tag> <Tag variant="warning">Warning</Tag> <Tag variant="danger">Danger</Tag> </HStack> <HStack gap="sm"> <Tag variant="neutral" type="subtle">Neutral</Tag> <Tag variant="info" type="subtle">Info</Tag> <Tag variant="success" type="subtle">Success</Tag> <Tag variant="warning" type="subtle">Warning</Tag> <Tag variant="danger" type="subtle">Danger</Tag> </HStack> </VStack>
Subtle-profil
Result
Loading...
Kode
Live Editor
<Tag variant="success" type="subtle">Godkjent</Tag>
Med ikon
Ikonet er dekorativt og skal støtte teksten, ikke erstatte den. Merk <ix-icon> med aria-hidden="true" slik at skjermleser ikke leser det.
Result
Loading...
Kode
Live Editor
<Tag variant="warning" type="subtle"> <Icon name="home" size="sm" /> Bolig </Tag>
Størrelser
Result
Loading...
Kode
Live Editor
<HStack gap="sm"> <Tag variant="info" size="sm">Liten</Tag> <Tag variant="info">Standard</Tag> <Tag variant="info" size="lg">Stor</Tag> </HStack>
Props
Props-dokumentasjonen genereres automatisk fra Storybook.
Tilpasning med CSS
Trenger du ix-tag-stylingen på HTML du setter sammen selv — uten React-komponenten — kan du bruke klassen direkte på elementet ditt. Farge kobles via data-status, som setter status-farge-variablene (--ix-color-status-*) automatisk, på samme måte som i Message.
Tilgjengelige klasser og attributter
| Element/tilstand | Selektor / attributt |
|---|---|
| Tag | .ix-tag |
| Status (farge) | data-status="neutral | info | success | warning | danger" |
| Visuell profil | data-variant="emphasis | subtle" |
| Størrelse | data-size="sm | lg" (utelates for standard md) |
| Ikon | .ix-tag .ix-icon / .ix-tag ix-icon (arver tekstfarge) |
Eksempel: bruk i egen HTML-struktur
<span class="ix-tag" data-status="danger" data-variant="subtle" data-size="sm">
<ix-icon name="warning" aria-hidden="true" class="ix-icon"></ix-icon>
Utløpt
</span>
Universell utforming
Hva du selv må sørge for
- Ikke formidle status med farge alene. Skriv betydningen i teksten — «Utløpt», «Godkjent» — ikke bare en rød eller grønn tag (WCAG 1.4.1).
- Skriv kort, meningsfull tekst på brukerens språk. Taggen har ingen hardkodet tekst, og innholdet leses som vanlig tekst uten rolle-annonsering.
- Merk ikoner som dekorative med
aria-hidden="true". Et ikon uten tekst gjør taggen meningsløs for skjermlesere. - Gjør du taggen interaktiv med
as="a"elleras="button", er du selv ansvarlig for meningsfull lenketekst/handling og at fokus- og tastaturatferd gir mening.
Hva komponenten gjør automatisk
- Velger tekstfarge mot bakgrunnen i hver variant slik at kontrasten når 4.5:1: emphasis bruker lys tekst mot mettet flate, subtle bruker mørk tekst mot pastell-flate.
- Reflower korrekt ned til 320 px viewport — taggen har ingen fast bredde.
- Kobler status-farge-variablene automatisk via
data-status.
Skjermleser
- Ikke-interaktiv tag: leses som vanlig tekst i lesekontekst — «[tekst]», uten rolle-annonsering.
- Ikon i taggen leses ikke når det har aria-hidden="true".
- Interaktiv tag (as="a"/"button"): annonseres med native rolle — «[tekst], lenke» eller «[tekst], knapp».
WCAG-kriterier
Sist gjennomgått: 2026-07-28 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier5 ditt ansvar · 8 håndtert · 47 ikke relevant · 0 ikke på plass
Ditt ansvar (5)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 1.4.1 Bruk av farge | A | Ikke stol på farge alene for å formidle status. Tag-varianten (info, success, warning, danger) endrer kun farge. Fargen alene formidler ikke betydning til brukere med nedsatt fargesyn eller skjermlesere. Teksten i taggen må selv bære betydningen — skriv «Utløpt» eller «Godkjent», ikke bare en rød eller grønn tag uten forklarende tekst. |
| 1.3.1 Informasjon og relasjoner | A | Skriv meningsfull tekst i taggen. Taggen har ingen automatisk tilgjengelig navn utover tekstinnholdet. Innholdet leses av skjermleser som vanlig tekst, uten noen rolle-annonsering. Bruk kort, beskrivende tekst på brukerens språk (bokmål, nynorsk eller engelsk). Komponenten har ingen hardkodet tekst. |
| 1.1.1 Ikke-tekstlig innhold | A | Ikoner i taggen er dekorative — merk dem som skjult. Et ikon i taggen skal støtte teksten, ikke erstatte den. Sett aria-hidden="true" på <ix-icon> slik at skjermleser ikke leser ikonet. Er ikonet det eneste innholdet (ingen tekst), er taggen meningsløs for skjermlesere — legg alltid til synlig eller skjult tekst. |
| 4.1.2 Navn, rolle, verdi | A | Sett riktig rolle/semantikk hvis taggen er interaktiv. Tag er som standard en ikke-interaktiv <span>. Gjør du taggen til en lenke eller knapp via as="a"/as="button", er du selv ansvarlig for meningsfull lenketekst, href eller onClick, og at fokus- og tastaturatferd gir mening i konteksten. |
| 2.4.4 Formål med lenke (i kontekst) | A | Sett riktig rolle/semantikk hvis taggen er interaktiv. Tag er som standard en ikke-interaktiv <span>. Gjør du taggen til en lenke eller knapp via as="a"/as="button", er du selv ansvarlig for meningsfull lenketekst, href eller onClick, og at fokus- og tastaturatferd gir mening i konteksten. |
Håndtert av komponenten (8)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Tekstinnholdet følger naturlig leserekkefølge i DOM. Ingen skjult struktur som må formidles. |
| 1.3.2 Meningsfull rekkefølge | A | Innhold (ikon + tekst) følger naturlig og meningsfull sekvens i DOM. |
| 1.4.1 Bruk av farge | A | Status kommuniseres av tekstinnhold i tillegg til farge — komponenten legger ikke opp til farge alene, men teksten er konsumentens ansvar. |
| 1.4.3 Kontrast (minimum) | AA | Emphasis bruker invers (lys) tekst mot mettet flate (4.8–5.5:1). Subtle bruker mørk main-tekst mot pastell-flate i alle statuser (10.8–13.2:1); fargen bæres av flate og border. Farget tekst per status ble vurdert, men token-systemet har ingen per-status foreground mørk nok til å nå 4.5:1 på de lyse subtle-flatene (info ville falt til 1.48:1), så mørk tekst er brukt. |
| 1.4.4 Endre tekststørrelse | AA | Størrelser bruker relative font-size-tokens og skalerer korrekt ved 200 % zoom. |
| 1.4.10 Omflyt | AA | Taggen er width: fit-content uten fast bredde og reflower korrekt ned til 320 px viewport. |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Emphasis-flaten oppfyller 3:1 komponentavgrensning mot lys sidebakgrunn (5.0–5.8:1 mot hvit). Subtle-varianten er bevisst rolig: pastell-flate (1.4–1.7:1) og border (2.2–2.5:1) når ikke 3:1 mot en lys side, men taggen er ikke-interaktiv og all betydning bæres av teksten (1.4.1) med 10.8–13.1:1 — avgrensningen er dekorativ, så 1.4.11 stiller ikke krav til den. |
| 1.3.4 Visningsretning | AA | Ingen fast orientering — taggen fungerer i både portrett og landskap. |
Ikke relevant (47)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Taggen har ikke ikke-tekstlig innhold i seg selv; ikon-barn er dekorativt og skjules av konsumenten med aria-hidden. |
| 1.2.1 Bare lyd og bare video (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.2 Teksting (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.4 Teksting (direkte) | AA | Ingen medieelementer. |
| 1.2.5 Synstolking (forhåndsinnspilt) | AA | Ingen medieelementer. |
| 1.3.3 Sensoriske egenskaper | A | Taggen formidler ikke instruksjoner. |
| 1.3.5 Identifiser formål med inndata | AA | Ikke et skjemafelt som ber om personlig informasjon. |
| 1.4.2 Styring av lyd | A | Ingen lydelementer. |
| 1.4.5 Bilder av tekst | AA | Ingen bilder av tekst. |
| 1.4.12 Tekstavstand | AA | |
| 1.4.13 Innhold ved hover eller fokus | AA | Taggen viser ikke innhold ved hover/fokus. |
| 2.1.1 Tastatur | A | Standard-taggen er ikke-interaktiv. Interaktiv bruk (as="a"/"button") arver native tastaturstøtte. |
| 2.1.2 Ingen tastaturfelle | A | |
| 2.1.4 Tastatursnarveier | A | Ingen egendefinerte tastatursnarveier. |
| 2.2.1 Justerbar hastighet | A | Ingen tidsbegrensede funksjoner. |
| 2.2.2 Pause, stopp, skjul | A | Ingen animasjon eller automatisk oppdatering. |
| 2.3.1 Terskelverdi på tre glimt | A | Ingen blinkende eller glimtende innhold. |
| 2.4.1 Hoppe over blokker | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.2 Sidetitler | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.3 Fokusrekkefølge | A | Ikke-interaktiv — ikke i tab-rekkefølgen. |
| 2.4.4 Formål med lenke (i kontekst) | A | Kun relevant hvis konsumenten gjør taggen til en lenke — da er lenketekst konsumentens ansvar. |
| 2.4.5 Flere måter | AA | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.6 Overskrifter og ledetekster | AA | |
| 2.4.7 Synlig fokus | AA | Standard-taggen er ikke fokuserbar. Interaktiv bruk arver native :focus-visible. |
| 2.4.11 Fokus ikke skjult (minimum) | AA | Ingen sticky/overlappende elementer som kan skjule fokus. |
| 2.5.1 Pekerbevegelser | A | Ingen drag-and-drop eller sveipebevegelser. |
| 2.5.2 Avbryt peker | A | |
| 2.5.4 Bevegelsesaktivering | A | Ingen bevegelsesbasert interaksjon. |
| 2.5.6 Samtidige inndatamekanismer | A | |
| 2.5.7 Drabevegelser | A | Ingen drag-and-drop. |
| 2.5.8 Målstørrelse (minimum) | AA | Ikke-interaktiv — intet klikkmål-krav. Interaktiv bruk må selv sikre 24×24 px. |
| 3.1.1 Språk på siden | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 3.1.2 Språk på deler av innhold | AA | Komponenten setter ikke lang-attributt — innhold er på sidespråket. |
| 3.2.1 Ved fokus | A | Ikke-interaktiv — ingen kontekstendring ved fokus. |
| 3.2.2 Ved inndata | A | |
| 3.2.3 Konsistent navigasjon | AA | Sidekrav — gjelder ikke enkeltkomponenter. |
| 3.2.4 Konsistent identifikasjon | AA | Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter. |
| 3.2.6 Konsistent hjelp | A | Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider. |
| 3.3.1 Identifikasjon av feil | A | |
| 3.3.2 Ledetekster eller instruksjoner | A | |
| 3.3.3 Forslag ved feil | AA | |
| 3.3.4 Forhindring av feil (juridisk, økonomisk, data) | AA | Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter. |
| 3.3.7 Redundant oppføring | A | Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess. |
| 3.3.8 Tilgjengelig autentisering (minimum) | AA | Ikke en autentiseringskomponent. |
| 4.1.2 Navn, rolle, verdi | A | Standard-taggen er ren tekst uten interaktiv rolle. Interaktiv bruk (as="a"/"button") gir native rolle. |
| 4.1.3 Statusmeldinger | AA | Taggen genererer ingen statusmeldinger — den er statisk innhold. |