Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

Link

En link er klikkbar tekst eller grafikk brukt til navigasjon. Komponenten er et enkelt anchor-element med Nav sitt design.

StabilOppdatert 6. august 2025
Github FigmaEndringslogg

Egnet til:

  • Lenke til ny side
  • Navigere til innhold på samme side

Uegnet til:

Eksempler

Retningslinjer

Les mer om hvordan du lager gode lenker i denne God praksis-artikkelen.

I Nav markerer vi ikke besøkte lenker ("visited").

Tilgjengelighet

Når navigering ved klikk på lenker håndteres med onClick, er det viktig å fortsatt ha med URL-en i href. Dette gjør at brukeren ser hvor lenken går. Manglende href gjør blant annet at lenken ikke blir tilgjengelig med tastatur.

Props

Link

underline?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Inverts when the underline appears. If this is false, the underline only appears on hover.

    NB: Underline can only be removed in menus etc. where it's obvious that it's a link.

inlineText?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Renders link with display: inline for better wrapping in text.

variant?

  • Type:
    "action" | "neutral" | "subtle"
  • Default:
    ""action""
  • Description:

    Variant of the component to use.

children

  • Type:
    ReactNode
  • Description:

    Link text

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Les mer om det nye themingsystemet.

TokenFallback
--ac-link-text--a-text-action
--ac-link-focus-text--a-text-on-action
--ac-link-focus-bg--a-border-focus
--ac-link-focus-border--a-border-focus
--ac-link-active-text--a-text-on-action
--ac-link-active-bg--a-border-focus
--ac-link-active-border--a-border-focus
--ac-link-action-text--a-text-action
--ac-link-neutral-text--a-text-default
--ac-link-subtle-text--a-text-subtle