Link

Länk

Storybook

React Aria

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

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

<Text>
  En text med en <Link href='#'>länk</Link> i ett textstycke.
</Text>

En text med en länk i ett textstycke.

Varianter

Länk

<Text>
  En text med en <Link href='#länk'>länk</Link> i ett textstycke.
</Text>

En text med en länk i ett textstycke.

Fristående

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

<Text>Text</Text>
<Link
  standalone
  href="#fristående"
>
  En länk som är fristående från text
</Link>

För att visa en länk som en fristående komponent, använd propertyn standalone. Detta kan vara användbart när du vill att länken ska stå ut från omgivande text eller när du vill placera den på en egen rad.

En länk som är fristående från text

Stretched

Använd stretched för att låta hela föräldraelementet vara klickbart till länken. Den klickbara ytan placeras med position: absolute och sträcker sig över hela föräldraelementet. Placera därför position: relative på relevant element för att inte den klickbara ytan ska sträckas för långt.

<div style={{ position: 'relative' }}>
  <p>Text</p>
  <Link
    standalone
    stretched
    href='#stretched'
  >
    En länk som sträcker sig över hela ytan
  </Link>
</div>

En länk kan sträcka sig över en hel yta genom propertyn stretched. Detta kan vara användbart när du vill att hela ytan ska vara klickbar, till exempel i en kort eller en panel.

En länk som sträcker sig över hela ytan

Ny flik

Om en länk är satt till att öppnas i en ny flik förtydligas detta med en ikon. Detta görs genom att sätta target='_blank' på länken.

<Link
  href='#länk'
  target='_blank'
>
  En länk till en annan URL
</Link>

En länk till en annan URL

Nedladdning

Även vid nedladdning förtydligas detta med en ikon. Detta görs genom att sätta download på länken.

<Link
  href='#nedladdning'
  download
>
  Ladda ned senaste rapporten
</Link>

Ladda ned senaste rapporten

Client Side Routing

Läs mer om hur du kan använda komponenten med Client Side Routing.

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>	-	Replace base component with any Client Side Routing link instead. . See Client side routing.