Link

Release dato: 24.04.2023

Sist oppdatert: 14.05.2025

Link (lenke) brukes for å sende brukeren til en annen nettside eller et annet sted i løsningen. Link skal være lett å kjenne igjen og forstå, og må derfor være tydelig både visuelt og språklig.

Live demo

Relaterte komponenter

Varianter

Type og bruk

Type	Bruk
Intern link	Link som leder til en side i samme løsning eller nettside
Ekstern link	Link som leder til en ekstern nettside, skal merkes tydelig i linken

Viktig: Vi bruker ikke ekstern link-ikon. Les mer under retningslinjer for bruk.

Retningslinjer for bruk

Bruk link når

du vil hjelpe brukeren å navigere til en annen side eller seksjon
du trenger å lenke til tilleggsinformasjon
du leder brukeren til en ekstern nettside eller fil

Unngå link når

du skal utføre en handling som lagring eller innsending (bruk button)

Skriv tydelig og konkret linktekst

Linkteksten skal si hva som skjer når brukeren klikker på den, den skal gi mening også når den leses isolert (for eksempel i en linkliste på skjermleser).

Unngå utydelige tekster som “Klikk her”, “Les mer” eller “Gå til”.

Gjør slik

Eksempel på klare og direkte tekster som gir brukeren indikasjon på hva som skjer etter klikk — Skriv klare og direkte tekster som gir brukeren indikasjon på hva som skjer etter klikk

Unngå

Eksempel på utydelige og generiske tekster — Unngå utydelige og generiske tekster

Marker link med mer enn bare farge

Alle links må kunne oppdages uansett syn, situasjon eller utstyr. Bruk understrek eller et beskrivende ikon. Dersom du bruker ikon er det viktig at du har en klar og tydelig linktekst.

Gjør slik

Eksempel på Link somm markeres med ikon. — Link kan markeres med ikon

Unngå

Eksempel på link som kun markeres med farge. — Unngå at link kun markeres med farge

Gå for én styling av lenker

Hold visuell stil konsekvent. Ikke bland farger, størrelser, ikoner eller varianter av linker.

Gjør slik

Eksempel på liste med linker — I en liste med linker burde alle ha samme styling

Unngå

Eksempel på ulike stil i liste med lenker — Unngå å variere mellom ulike linkstiler i samme kontekst

Ikke bruk ekstern link-ikon

Ikonet kan misforstås og gi dårlig brukeropplevelse. Mange tror det betyr «åpnes i ny fane», andre tror det betyr «ekstern side». Vi anbefaler å alltid bruke tekst for å forklare hva linken leder til.

Du kan dypdykke i begrunnelsen for denne avgjørelsen i artikkelen hos Designsystemet som vi har vært med som bidragsytere i.

Åpne i ny fane kun når det er nødvendig

Som hovedregel åpnes links i samme fane. Åpning i ny fane bør kun brukes:

Hvis brukeren risikerer å bli logget ut
Hvis brukeren er midt i en prosess der data kan gå tapt

Gjør slik

Eksempel på hvordan å markere lenker som åpner ny fane — Skriv alltid i linken hvis lenken åpner i ny fane og hvor den fører hen

Unngå

Eksempel på dårlig bruk av ekstern link-ikon og unnlate å skrive hvor linken fører — Unngå å bruke ekstern link-ikon og unnlate å skrive hvor linken fører

Gi beskjed ved filer og nedlasting

Gjør det tydelig hvis linken fører til en fil. Oppgi:

Filtype (for eksempel PDF, DOCX)
Eventuelt filstørrelse, særlig for store filer
Hvis filen skal lastes ned, bruk download-attributt og informer i teksten.

Responsivitet

Link fungerer automatisk på alle skjermstørrelser.

Du må selv teste at

linken er tydelige og enkle å bruke, også på mobil
tastaturnavigasjon er ivaretatt

Universell utforming

Link må være lette å oppdage og bruke

Bruk understrek for å markere en link, ikke bare farge.
Links må kunne brukes med tastatur og skjermleser.
Fokusstil må være synlig.

Linken må gi mening alene

Unngå flere linker med samme tekst på én side, med mindre de leder til samme sted. Skriv så konkret og presist som mulig.

Mer om universell utforming av links:

Anatomi

Element	Beskrivelse
1. Linktekst	Klikkbar tekst som forteller brukeren hva linken fører til
2. Ikon venstre	Ikon til venstre som viser at teksten er klikkbar (valgfritt)
2. Ikon høyre	Ikon til høyre som viser at teksten er klikkbar (valgfritt)

Implementasjon i kode

Hvordan ta komponenten i bruk?

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-link");

Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.

Props og tokens

Prop	Type	Beskrivelse
`href`	`string`	URL til lenken
`target`	`_blank` `_self` `_parent` `_top`	Mål for lenken
`iconName`	`icon`	Ikon som skal vises ved siden av lenketeksten
`iconPosition`	`left` `right`	Posisjonen til ikonet i forhold til lenketeksten

Slot (children)	Beskrivelse
`default`	Innholdet i lenken

Farger

Element	CSS Variabel
Text
Underline
Icon