Link

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>

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"
    className="group"
  >
    Ekstern lenke
    <LinkExternal className="group-hover:motion-safe:-translate-y-0.5 shrink-0 transition-transform group-hover:motion-safe:translate-x-0.5" />
  </Link>

  <UNSAFE_Link download href="/document.pdf" className="group">
    Last ned dokument{' '}
    <Download className="shrink-0 transition-transform group-hover:motion-safe:translate-y-1" />
  </UNSAFE_Link>
</div>