Link

GitHub

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

Om komponenten

Link brukes for å lede brukeren til en annen side, seksjon eller ressurs. Den gir en tydelig visuell indikasjon på at elementet er klikkbart, og kan brukes med eller uten ikon.

Egnet til:

  • Navigere til andre sider eller seksjoner
  • Lenke til dokumenter, filer eller eksterne ressurser
  • Kryssreferanser i tekstinnhold (f.eks. «Les mer»)
  • Som lenke i Card

Uegnet til:

  • Handlinger som endrer innhold på siden uten navigasjon (bruk heller Button)
  • Brødsmulesti (bruk heller Breadcrumbs)
  • Lenker for gå tilbake (bruk heller Backlink)

Komponenten er liten wrapper rundt Link fra react-aria-components, og funker med client-side ruting.

Eksempler

Standard lenke, brukes typisk i løpende tekst:

<UNSAFE_Link href="https://obos.no/">OBOS</UNSAFE_Link>

Link med ikon og animasjon

<UNSAFE_Link href="https://obos.no/" animateIcon="right">OBOS <ArrowRight /></UNSAFE_Link>

Lenker med spesielle egenskaper kan skilles ut ved bruk av ikoner:

<div className="grid gap-y-3.5">
  <UNSAFE_Link
    href="https://obos.no"
    target="_blank"
    rel="noreferrer"
    animateIcon="up-right"
  >
    Ekstern lenke
    <LinkExternal />
  </Link>

  <UNSAFE_Link download href="/document.pdf" animateIcon="down">
    Last ned dokument{' '}
    <Download />
  </UNSAFE_Link>
</div>