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
Ikoner brukes ofte i knapper for å understøtte handlinger.
Ikoner kan benyttes for å understreke menyelementer.
Når brukeren kan åpne og lukke innhold for å få mer informasjon.
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
Unngå
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
Unngå
Gå for én styling av lenker
Hold visuell stil konsekvent. Ikke bland farger, størrelser, ikoner eller varianter av linker.
Gjør slik
Unngå
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
Unngå
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?
import @oslokommune/punkt-elements/dist/pkt-link.js;import { PktLink } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/19/elements/pkt-link.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-link");Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.
Egendefinert lenkekomponent (kun React)
Bruk renderLink for å integrere med klient-side-rutere uten å legge til en ruteravhengighet i Punkt. Funksjonen mottar { href, className, children, props } og skal returnere en React-node. Ikon og innhold sendes inn som children, og klassene som styrer ikonplassering og ekstern link ligger i className.
// React Router
import { Link } from 'react-router-dom'
<PktLink
href="/oversikt"
iconName="chevron-right"
iconPosition="right"
renderLink={({ href, className, children, props }) => (
<Link to={href} className={className} {...props}>{children}</Link>
)}
>
Til oversikten
</PktLink>Hvis renderLink ikke sendes inn, brukes et vanlig <a>-element.
Egenskaper
Props
- Prop:
href?- Type:
string- Standardverdi:
"#"- Beskrivelse:
- URL til lenken
- Prop:
target?- Type:
"_blank" | "_self" | "_parent" | "_top"- Standardverdi:
"_self"- Beskrivelse:
- Mål for lenken
- Prop:
iconName?- Type:
icon- Beskrivelse:
- Ikon som skal vises ved siden av lenketeksten
- Prop:
iconPosition?- Type:
"left" | "right"- Beskrivelse:
- Posisjonen til ikonet i forhold til lenketeksten
- Prop:
renderLink?- Type:
(args: IRenderLink) => ReactNode- Beskrivelse:
- React: Funksjon for å rendre en egendefinert lenkekomponent (f.eks. Next.js Link eller React Router Link). Mottar et
IRenderLink-objekt med href, className, children og props. Standard er et vanlig<a>-element.
Slots
- Slot:
default- Beskrivelse:
- Innholdet i lenken
Objektet som sendes til renderLink i Link, BackLink og Breadcrumbs. Kun React — brukes til å bytte ut standard <a> med f.eks. Next.js Link eller React Router Link.
- Prop:
href- Type:
string- Beskrivelse:
- Mål-URL for lenken.
- Prop:
className- Type:
string- Beskrivelse:
- CSS-klasser Punkt har satt på lenken.
- Prop:
children- Type:
ReactNode- Beskrivelse:
- Innhold/label som skal rendres inni lenken.
- Prop:
props- Type:
AnchorHTMLAttributes<HTMLAnchorElement>- Beskrivelse:
- Resten av anchor-attributter (f.eks.
onClick,aria-*) som skal spreades på lenken.