Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Link

Oppdatert 30. april 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
  • Tilgjengelighet
  • Props
    • Link
  • Tokens

Intro

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

Egnet til:

  • Lenke til nye sider
  • Innholds-snarveier

Uegnet til:

  • Handlinger (se Button)

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Prop-en 'inlineText' gjør at teksten wrapper.

Ikke bruk action-varianten på farget bakgrunn.

Bruk 'as'-propen hvis du bruker et rammeverk som har sin egen link-komponent.

Retningslinjer

LenkerLenker

  • Hvordan lage gode lenker
  • MDN-artikkel om <a>
  • Bruk Button for handlinger

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

Tilgjengelighet

Når navigering ved klikk på Link håndteres med onClick, er det viktig å fortsatt ha med en href. Dette gir bruker bedre indikasjon på hva konsekvensen av å klikke på lenken er.

Props

Link

as?

  • Type:
    React.ElementType
  • Description:

underline?

  • Type:
    boolean
  • Default:
    true
  • Description:

inlineText?

  • Type:
    boolean
  • Default:
    false
  • Description:

variant?

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

children

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

Tokens

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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter

  • Button thumbnail
    Button

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack