Link

const Preview = () => {
  const rand = useId();
  return (
    <Link href={'/no/patterns/external-links/' + rand}>Merking av lenker</Link>
  );
};

render(<Preview />)

Bruk Link når

• du skal lenke til en ny side internt eller eksternt
• du skal lenke til et annet sted på siden
• en fil skal lastes ned

Unngå Link når

• brukeren skal utføre en handling, for eksempel «Lagre» eller «Logg inn», bruk heller Button.
• tilstanden i løsningen påvirkes, som å åpne en dialog, starte en prosess eller lagre data, bruk heller Button.

Eksempel

Med ikon

Lenker kan ha ikon plassert enten til venstre eller høyre for teksten. Som hovedregel anbefaler vi å plassere ikonet til venstre.

const WithIcon = () => {
  return (
    <Link href='https://designsystemet.no/slack'>
      <Chat2Icon aria-hidden fontSize={24} />
      <span>Snakk med oss på Slack</span>
    </Link>
  );
};

render(<WithIcon />)

Lenke i tekst

En lenke brukes ofte som en del av en tekst.

const InText = () => {
  const rand = useId();

  return (
    <Paragraph>
      Vi bruker komponenter fra{' '}
      <Link href={'https://designsystemet.no?q=' + rand}>
        designsystemet.no
      </Link>
      .
    </Paragraph>
  );
};

render(<InText />)

Nøytral farge

Lenker kan også vises i en nøytral farge. Dette kan være nyttig når lenken står i et område med egen bakgrunnsfarge.

const Neutral = () => {
  const rand = useId();
  return (
    <Link href={'/no/fundamentals/privacy-policy' + rand} data-color='neutral'>
      Personvernerklæring
    </Link>
  );
};

render(<Neutral />)

Retningslinjer

Lenken må peke til informasjon brukeren trenger, eller der de kan løse oppgaven. Unngå å lenke til generelle sider der brukeren må finne fram selv.

Det er viktig å ikke overbruke lenker, fordi dette kan gjøre det vanskeligere for brukeren å finne veien videre.

Ikke bruk ikon for ekstern lenke

Ikonet kan lett misforstås og gi en dårlig brukeropplevelse. Mange tolker det som «åpnes i ny fane», mens andre tror det betyr «ekstern side». I stedet anbefaler vi alltid å bruke tekst for å forklare hva lenken leder til. På den måten blir funksjonen tydelig både for brukere og for skjermleserverktøy. Les mer om dette i artikkelen Merking av lenker som Digdir har utarbeidet sammen med Nav, Skatteetaten, Oslo kommune og Brønnøysundregistrene.

Unngå at lenker blir åpnet i ny fane

Både interne og eksterne lenker skal åpnes i samme fane eller vindu. Dette sikrer en forutsigbar brukeropplevelse.

Det finnes likevel noen unntak, der lenken bør åpnes i ny fane:

• Hvis systemet må logge ut brukeren når det navigeres til en annen side, og det er hensiktsmessig å unngå utlogging.
• Når brukeren er midt i en prosess og risikerer å miste innhold ved å klikke på lenken. Ny fane bør vurderes hvis systemet ikke klarer å lagre brukerens inndata.
• Hvis du lenker til innhold som brukerne trenger når de utfører en oppgave, for eksempel veiledning

I disse tilfellene anbefaler vi å skrive “åpnes i ny fane” som en del av lenketeksten, slik at det er tydelig for brukeren.

Les mer om dette i artikkelen Merking av lenker.

Tekst

Gode lenker er selvforklarende og forteller hvor du havner når du trykker på dem. Se for deg at lenketeksten skal leses av en skjermleser når du skriver den. Lenketeksten skal gi mening når den leses isolert, uavhengig av om den er en del av en setning, meny eller liste.

Prinsipper for lenketekst

• Bruk de viktige ordene (triggerord) tidlig i lenketeksten.
• “Gå til”, “Klikk her”, “Lenke til” eller “Les mer” skal aldri være hele lenketeksten.
• Alle lenker på samme side må ha unike lenketekster.
• Det bør være et verb tidlig i lenketeksten.

Få flere råd om lenker i artikkelen om Merking av lenker.