TextLink

Kildekode på GitHub · Les som Markdown

TextLink er en inline lenkekomponent med understreket tekst som fjerner understrekingen ved hover. Komponenten oppdager automatisk eksterne URLer og viser et eksternt-lenke-ikon, setter target="_blank" og legger til skjermlesertekst for tilgjengelighet.

Importering

import { TextLink } from "@kilden/designsystem";

Grunnleggende bruk

<TextLink href="/komponenter">Gå til komponenter</TextLink>

Ekstern lenke

Eksterne lenker (http/https) får automatisk et trailing-ikon og åpnes i nytt vindu.

<TextLink href="https://bekk.no">Besøk Bekk</TextLink>

Ikon-varianter

Du kan styre ikonplassering med iconPlacement-propen, og sende inn et custom ikon med icon-propen.

<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
<TextLink href="/test" iconPlacement="none">Uten ikon</TextLink>
<TextLink href="/test" iconPlacement="leading">Med leading-ikon</TextLink>
<TextLink href="/test" iconPlacement="trailing">Med trailing-ikon</TextLink>
<TextLink href="https://bekk.no" iconPlacement="auto">Auto (ekstern = trailing)</TextLink>
</div>

Custom ikon

Send inn et eget ikon med icon-propen. Ikonet erstatter standard ExternalLink-ikonet.

<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
<TextLink href="/neste-side" icon={<ArrowRight className="h-[1em] w-[1em]" />} iconPlacement="trailing">
  Neste side
</TextLink>
<TextLink href="/last-ned" icon={<Download className="h-[1em] w-[1em]" />} iconPlacement="leading">
  Last ned rapport
</TextLink>
</div>

Med asChild

Bruk asChild for å rendre en annen komponent som rot-element, for eksempel React Router sin Link.

<TextLink asChild>
<a href="/komponenter">React Router Link</a>
</TextLink>

Bruksanbefalinger

Tilgjengelighet

• Understreking som standard gir visuell indikasjon på at teksten er klikkbar
• Eksterne lenker annonseres med "(åpner i nytt vindu)" for skjermlesere
• target="_blank" settes automatisk med rel="noopener noreferrer" for sikkerhet
• Fokusring med tydelig kontrast for tastaturnavigasjon
• Ikoner har aria-hidden="true" for å unngå duplikat annonsering

Props