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.

Test komponenten

Relaterte komponenter

Varianter

Type og bruk

TypeBruk
Intern linkLink som leder til en side i samme lĂžsning eller nettside
Ekstern linkLink 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

  • 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
  • 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

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

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

  • 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

ElementBeskrivelse
1. LinktekstKlikkbar tekst som forteller brukeren hva linken fĂžrer til
2. Ikon venstreIkon til venstre som viser at teksten er klikkbar (valgfritt)
2. Ikon hĂžyreIkon 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

PropTypeBeskrivelse
hrefstringURL til lenken
target_blank
_self
_parent
_top		MĂ„l for lenken
iconNameiconIkon som skal vises ved siden av lenketeksten
iconPositionleft
right		Posisjonen til ikonet i forhold til lenketeksten
Slot (children)Beskrivelse
defaultInnholdet i lenken