Komponenter
Link
En link er klikkbar tekst eller grafikk brukt til navigasjon. Komponenten er et enkelt anchor-element med Nav sitt design.
Egnet til:
- Lenke til ny side
- Navigere til innhold på samme side
Uegnet til:
- Handlinger (se Button)
Eksempler
<BodyLong> Officia incididunt <Link href="/eksempel">lenke til ny side</Link> occaecat commodo id ad aliquip.</BodyLong>
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
tonull
(or call the ref withnull
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. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
Token | Fallback |
---|---|
--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 |