Tag

Egnet til:

• å vise statuser, kategorier eller nøkkelord.
• å utheve informasjon slik at brukeren raskt oppfatter den. 

Uegnet til:

• å bruke mange på en side, slik at informasjonen drukner.
  
• å lenke til andre sider.
• handlinger – bruk heller Button
  
  

Teknisk dokumentasjon

Se Tag i Storybook for tekniske detaljer. 

Varianter

Vi har to størrelser av merkelapp – medium og liten. Variantene har mulighet for å ha ikon. 

Medium variant.

Liten variant.

Hvordan bruke komponenten  

Fargebruk

Fargene i Tag-komponenten skal brukes bevisst og konsistent. Når farger har en semantisk betydning – altså formidler en status eller tilstand – omtales de som meningsbærende farger. Dette gjelder særlig ved bruk av en trafikklysmodell:

• Grønn: Positiv status, suksess eller godkjent.
• Rød: Negativ status, feil eller advarsel.
• Gul: Nøytral informasjon eller pågående status.

Ved bruk av disse fargene forventes det at brukeren tolker fargen som en indikator på innholdets betydning. For å styrke denne tolkningen kan man med fordel bruke et ikon sammen med fargen.

Eksempel på meningsbærende farger i Tag

Hvis fargen ikke skal formidle mening, anbefales det å bruke nøytrale farger som:

• Grå eller
• Gul (uten semantisk kontekst)

I slike tilfeller bør alle tagger ha samme farge, slik at fargen kun fungerer som visuell støtte – ikke som informasjonsbærer. Dette bidrar til et ryddig og tilgjengelig grensesnitt, og hindrer feilaktig tolkning av fargebruk.

Eksempel på ikke-meningsbærende farger

Universell utforming  

• Unngå blå tekst (lenke) på rød bakgrunn. Denne kombinasjonen har ikke tilstrekkelig kontrast.
• Ikoner i Tag er definert som pynt/dekor og skjules derfor for skjermleser. Det bør fremgå av teksten hva slags type status/informasjon som gis.