Hopp til innhold

Tag

Tags er små informasjonsbobler som kan brukes til å presentere en eller flere biter med informasjon tilknyttet et hovedtema.

Vi har to kategorier av tags:

  1. Status vises med en passende farge.
  2. Emne eller metadata vises nøytralt.
EmneInfoSuksessAdvarselFeil

Vi har også noen prinsipper for innholdet i tags:

  • Tags inneholder kun tekst.
  • Teksten starter med stor forbokstav etterfulgt av små, med mindre det er en forkortelse eller merkevare.
  • Teksten bør ikke overskride 12 tegn.
  • Mellomrom bør unngås hvis mulig.
E-kunde

Riktig

Kort tekst

Kunden er e-kunde

Feil

Lang tekst

PDF

Riktig

Forkortelse

E-KUNDE

Feil

Alt som versaler

Fargene i statustags har en betydning på samme måte som MessageBox:

  • Grønt betyr at noe er vellykket eller ferdig
  • Gult informerer om noe som kan ha innvirkning på brukeren, men hvor det ikke kreves en handling
  • Rødt betyr at en handling kreves eller noe har gått galt så handlingen ikke kunne gjennomføres

Blått kan brukes om de andre kategoriene ikke passer, men bare dersom samme sted vil kunne vise en annen statusfarge hvis situasjonen var annerledes. Blått er med andre ord ikke en nøytral farge som kan brukes til informasjon utenfor statuskategorien. Til det brukes emnevarianten.

Registrert

Riktig

Status

Miljøvennlig

Feil

Statusfarge for emne

Behandles

Riktig

Status

Behandles

Feil

Emnefarge for status

Flom

Riktig

Emne

Flom

Feil

Statusfarge for emne

Når bruker vi tags?

Før du bruker en tag bør du stille noen kontrollspørsmål:

  • Er teksten kort nok til å passe inn i en tag?
  • Er det tydelig for brukeren hva tagsene er tilknyttet? Også for brukere av skjermlesere?
  • Passer informasjonen jeg skal vise inn i én av de to kategoriene – status og emne?
  • Vises informasjonen i en tabell? I så fall, gir det verdi å bruke en tag i stedet for en vanlig tekstkolonne?

React API

Her finner du en oversikt over props på komponentene i pakken.