Link

Länk

Storybook

React Aria

Komponenten Link skapar en länk som kan vara i ett textstycke eller fristående.

<p>
  I vår
  <Link href='/changelog'>Changelog</Link>
  dokumenterar vi de senaste ändringarna i komponenterna.
</p>

I vår Changelog dokumenterar vi de senaste ändringarna i komponenterna.

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Link } from '@midas-ds/components'

Varianter

Länk

default

<p>
  Designsystemet utvecklas ständigt,
  <Link href='/changelog'>vilket du kan kan se i vår Changelog</Link>
  Vi släpper kontinuerligt nya versioner med buggfixar, nya komponenter och nya funktioner.
</p>

Designsystemet utvecklas ständigt, vilket du kan kan se i vår Changelog. Vi släpper kontinuerligt nya versioner med buggfixar, nya komponenter och nya funktioner.

Fristående

Använd standalone för att använda komponenten som en fristående länk under t.ex ett textblock.

standalone

<p>
  Designsystemet utvecklas ständigt. Vi släpper kontinuerligt nya versioner med buggfixar, nya komponenter och nya funktioner på befintliga komponenter.
</p>
<Link
  standalone
  href="/changelog"
>
  Se vad som har ändrats i senaste versionen
</Link>

Designsystemet utvecklas ständigt. Vi släpper kontinuerligt nya versioner med buggfixar, nya komponenter och nya funktioner på befintliga komponenter.

Se vad som har ändrats i senaste versionen

Stretched

Använd stretched för att låta hela föräldraelementet vara klickbart till länken. Föräldern måste ha position: relative; för att länkens klickyta inte ska gå för långt.

stretched

<div style={{ position: 'relative' }}>
  <p>
    Designsystemet utvecklas ständigt. Varannan vecka kommer det ett nytt släpp med buggfixar, nya komponenter eller nya
    funktioner på befintliga komponenter. Om du håller muspekaren här så kan du klicka på länken över hela den gråa
    ytan.
  </p>
  <Link
    standalone
    stretched
    href='/#'
  >
    Läs mer om designsystemets nyheter
  </Link>
</div>

Designsystemet utvecklas ständigt. Varannan vecka kommer det ett nytt släpp med buggfixar, nya komponenter eller nya funktioner på befintliga komponenter. Om du håller muspekaren här så kan du klicka på länken över hela den gråa ytan.

Läs mer om designsystemets nyheter

Riktlinjer

Val av komponent

Se mönstret Knappar och länkar

API

Name	Type	Default	Description
standalone	boolean	-	Use standalone to use the component as a standalone link, for example under a block of text.
stretched	boolean	-	Use stretched to make the entire parent element clickable to the link. The parent must have position: relative; so that the clickable area of the link does not extend too far.
icon	LucideIcon	-	Optional icon, placed to the left of the link
className	string	-
as	ElementType<any, keyof IntrinsicElements>	-