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
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: inlinefor 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.currenttonull(or call the ref withnullif 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 |