# Link

Ein Link dient in erster Linie dazu, den User zu einer anderen Seite zu navigieren. Darüber hinaus kann er auch einen Download starten oder zu einem bestimmten Ankerpunkt auf der Seite führen.

## Overview

# Playground

Verwende `<Link />`, um einen Link darzustellen.

```tsx
import { Link } from "@mittwald/flow-react-components";

<Link href="#">Zum Dashboard</Link>
```

---

# Inline

Links innerhalb des `<Text />` -Tags werden automatisch als Inline Link
gerendert.

```tsx
import {
  Link,
  Text,
} from "@mittwald/flow-react-components";

<Text>
  Sieh dir unser <Link href="#">Onboarding</Link> an, um
  weitere Informationen zu erhalten.
</Text>
```

---

# Color

Zusätzlich zu der Standard-Color, kann der Link in **Light** und **Dark**
dargestellt werden. Light und Dark eignen sich besonders gut für Links auf
farbigen/dekorativen Hintergründen.

```tsx
import { Link } from "@mittwald/flow-react-components";

<Link href="#" color="light">
  Light
</Link>
```

```tsx
import { Link } from "@mittwald/flow-react-components";

<Link href="#" color="dark">
  Dark
</Link>
```

**Light:** Verwende die Light-Color bei dunklen Hintergründen mit einem HSL
Lightness-Wert von weniger als 50.

**Dark:** Verwende die Dark-Color bei hellen, farbigen Hintergründen mit einem
HSL Lightness-Wert von mehr als 50.

---

# Kombiniere mit ...

## Icon

Rechts neben dem Link kann ein `Icon` eingefügt werden.

### Externer Link

Das `IconExternalLink` signalisiert dem User, dass es sich um einen externen
Link handelt – also einen Verweis auf eine andere Domain –, der in einem neuen
Tab geöffnet wird. Das Icon erscheint automatisch neben dem Link, wenn das
Attribut `target="_blank"` gesetzt ist.

```tsx
import { Link } from "@mittwald/flow-react-components";

<Link href="https://mittwald.de" target="_blank">
  Externer Link
</Link>
```

### Download

Das `IconDownload` zeigt an, dass es sich um einen Download-Link handelt. Das
Icon wird automatisch neben dem Link angezeigt, wenn das `download` Property
gesetzt ist.

```tsx
import { Link } from "@mittwald/flow-react-components";

<Link download>Rechnung herunterladen</Link>
```

---

## States

Ein Link hat vier verschiedene States: **Default**, **Hover**, **Pressed** und
**Disabled**.

```tsx
import { Link } from "@mittwald/flow-react-components";

<Link href="#" isDisabled>
  Disabled
</Link>
```