Tag
Release dato: 12.06.2023
Sist oppdatert: 31.10.2024
En tag (også kalt badge eller chip) brukes for å merke, kategorisere eller organisere innhold med korte nøkkelord. Den kan hjelpe brukeren å raskt skanne informasjon, skille mellom kategorier eller filtrere innhold.
Test komponenten
Relaterte komponenter
For gruppering av tekst og innhold uten statushensikt.
Alert kan brukes i en modal ved behov for kritisk informasjon.
Kan brukes for å vise status i tillegg til alert.
Varianter
Varianter
| Variant | Bruk |
|---|---|
| Kun tekst | Standard variant |
| Med ikon | Når ikonet skal understøtte eller forsterke teksten |
| Med “lukk”-ikon | Når tag brukes til filtrering og brukeren skal kunne fjerne valget |
Størrelser
Tag finnes i flere størrelser og farger, og kan brukes med eller uten ikon. Når en tag brukes til filtrering, kan den ha et “lukk”-ikon slik at brukeren kan fjerne valget.
| Størrelse | Bruk |
|---|---|
| Small | Når tagen brukes tett på annet innhold og trenger å være diskret |
| Medium (default) | Standardstørrelse som passer i de fleste tilfeller |
| Large | Når teksten er lengre eller tagen skal være mer fremtredende |
Farger
Tag har også flere mulige farger:
| Farge | Bruk |
|---|---|
| Blue | Kan brukes til nøytrale kategorier |
| Green | Kan brukes til positive kategorier, fremdrift eller suksessrelatert informasjon |
| Red | Kan brukes til å markere feil, avvik eller kritisk status |
| Beige | Kan brukes til mer diskret informasjon |
| Yellow | Kan brukes til å fremheve varsler eller oppmerksomhetskrevende status |
| Gray | Kan brukes til nøytrale valg, utgått status eller bakgrunnskategorier |
| Light blue | Kan brukes til nøytrale kategorier |
| Dark blue | Kan brukes til kategorier som skal ha høy kontrast og tydelig skille (bør brukes sparsomt da den kan forveksles med primary button) |
Retningslinjer for bruk
Bruk tag når
- du skal merke eller gruppere informasjon etter nøkkelord
- du vil la brukeren filtrere på kategorier
- du trenger en kort og lettlest markør i grensesnittet
Unngå tag når
- informasjonen krever lengre forklaringer
- farge alene er brukt for å formidle mening
- du ønsker et interaktivt element som tar brukeren til en ny side eller løsning (bruk heller button)
Skriv korte og konsise tags
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.
Gjør slik
Unngå
Ikke bruk kun farge for å skille tags fra hverandre
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.
Gjør slik
Unngå
Bruk av ikon i tags
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 slik
Unngå
Responsivitet
Tag skalerer godt på alle skjermstørrelser og bryter linjer der det er nødvendig.
På små skjermer bør du vurdere om mange tags kan gjøre grensesnittet uoversiktlig eller dytter ned viktig innhold. Trunker eller avkort lange tekster for å unngå at de bygger for mange linjer.
Universell utforming
Teksten må gi mening i kontekst
En tag bør alltid ha en kort og tydelig tekst som gir mening når den leses opp av skjermlesere. Ikke bruk generiske ord som “Ny” alene, men skriv for eksempel “Ny søknad” slik at sammenhengen blir forståelig.
Bruk aria-label for lukkbare tags
For lukkbare tags kan du sende inn en valgfri ariaLabel som gir skjermlesere mer informasjon. Denne vil da leses opp i stedet for selve teksten i tagen. Uten ariaLabel vil skjermleseren lese opp tekstinnholdet i tagen, etterfulgt av en standardbeskrivelse: “Klikk for å fjerne [tagtekst]”.
Ikke bruk farge alene
Fargen på en tag blir ikke opplest av skjermlesere og er ikke nok som meningsbærer for brukere med svakt eller dårlig syn. Sørg derfor for at informasjonen fargen skal formidle også kommer tydelig frem i tekst eller ikon. Du kan også legge til skjult hjelpetekst som kun blir lest opp av skjermlesere.
Tags som knapper
Når en tag kan lukkes eller klikkes, får den rollen som en knapp og skal kunne fokuseres og aktiveres med tastatur. Sørg for at dette fungerer konsekvent.
Anatomi
| Element | Beskrivelse |
|---|---|
| Ikon (valgfritt) | Understøtter teksten |
| Tekst | Kort og tydelig innhold som beskriver status eller kategori |
| Bakgrunn | Bakgrunnsfarge for tag |
| “Lukk”-ikon | Brukes til filtrering slik at brukeren kan fjerne valget |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-tag.js;import { PktTag } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/17/elements/pkt-tag.js" type="module"></script>Testing
Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:
await window.customElements.whenDefined("pkt-tag");Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.
Egenskaper
Props
- Prop:
-
size? - Type:
-
"small" | "medium" | "large" - Standardverdi:
-
"medium" - Beskrivelse:
- Størrelsen på taggen
- Prop:
-
iconName? - Type:
-
icon - Beskrivelse:
- Navnet på ikonet som skal vises i taggen
- Prop:
-
skin? - Type:
-
"blue" | "blue-light" | "blue-dark" | "green" | "red" | "beige" | "yellow" | "gray" - Standardverdi:
-
"blue" - Beskrivelse:
- Utseendet til taggen
- Prop:
-
closeTag? - Type:
-
boolean - Standardverdi:
-
false - Beskrivelse:
- Skal taggen ha en lukkeknapp?
- Prop:
-
textStyle? - Type:
-
"thin-text" | "normal-text" - Standardverdi:
-
"normal-text" - Beskrivelse:
- Stilen på teksten i taggen
- Prop:
-
type? - Type:
-
"button" | "submit" | "reset" - Standardverdi:
-
"button" - Beskrivelse:
- Type tag, brukes for å spesifisere om det er en knapp, submit eller reset
- Prop:
-
ariaLabel? - Type:
-
string - Beskrivelse:
- aria-label for taggen, brukes for tilgjengelighet
Slots
- Slot:
-
default - Beskrivelse:
- Teksten til tag