Tag

Status
Figma ✅Publisert
CSS ✅Publisert
Vue ✅Publisert
React ✅Publisert
Dokumentasjon ✅Publisert

Om komponenten

Tags (også noen ganger referert til som badge) brukes til innhold som trenger å merkes, kategoriseres eller organiseres ved hjelp av nøkkelord som beskriver dem. Tags brukes ofte som et filter der alle tagsene er i samme farge, eller når innholdet er kartlagt til flere kategorier, der fargen brukes til å skille mellom kategoriene.

Varianter

Tag kommer i flere forskjellige farger, og kan brukes med eller uten ikon.

De ulike fargene som kan brukes er:

  • Blue: $blue-light (#B3F5FF)
  • Green: $green-light (#C7F6C9)
  • Red: $red-light (#FFB4AC)
  • Beige: $beige-light (#F8F0DD)
  • Yellow: $yellow-50 (#FFE7BC)
  • Gray: $gray (#F2F2F2)
  • Light blue: $blue-10 (#e5fcff)

Alle bruker blue-dark (#2A2859) som tekstfarge. Dersom du endrer fargene er det viktig at du dobbeltsjekker at du møter WCAGs kontrastkrav.

Når en tag brukes til filtrering, kan de også ha et “lukk”-ikon på høyre side.

Tagen fungerer da som en knapp, og har hover, fokus og active-state.

Tag har tre forskjellige størrelser: small, medium (default) og large. Bruk den størrelsen som passer best sammen med konteksten den opptrer i.

Slik bruker du komponenten

Sørg for at teksten i tagen er klar og konsis, det er viktig å bruke korte tekster for enkel skanning. Bruk to ord kun om det er nødvendig for å beskrive statusen eller skille den fra en annen tag. Dersom den skal bli lest av skjermleser må den også inkludere kontekst. For eksempel burde det stå “Ny søknad” i stedet for bare “Ny”.

Farge bør ikke brukes som det eneste middelet for å skille tags fra hverandre. Sørg for at informasjonen som tillegges fargen også kommer tydelig frem i innholdet, via tekst og ikon. Dersom du bruker egendefinerte farger, må kravene til minimum kontrast overholdes.

Dersom du bruker ikon skal dette alltid vises på venstre side av teksten. Ikonet skal underbygge teksten i tagen. Ikke bruk tag med kun ikon, dette gjør det vanskelig for brukeren å skjønne betydningen.

Gjør dette/ikke gjør dette

Ikke bruk tag med lange setninger

Ikke bruk tag med kun ikoner

Anatomi

  1. Ikon (valgfritt)
  2. Tekst
  3. Bakgrunn
  4. Lukk-ikon (valgfritt)