mittwald Flow Logo

Components

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.GitHub
Zum Dashboard

Playground

Verwende <Link />, um einen Link darzustellen.

Zum Dashboard
import { Link } from "@mittwald/flow-react-components";

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

Inline

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

Sieh dir unser Onboarding an, um weitere Informationen zu erhalten.
import {
  Link,
  Text,
} from "@mittwald/flow-react-components";

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

Color

Der Link kann in den drei Colors Primary, Light und Dark dargestellt werden. Light und Dark eignen sich besonders gut für Links auf farbigen/dekorativen Hintergründen.

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

<Link href="#">Primary</Link>
Light
import { Link } from "@mittwald/flow-react-components";

<Link href="#" color="light">
  Light
</Link>
Dark
import { Link } from "@mittwald/flow-react-components";

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

Primary: Im Standardfall wird die Color Primary verwendet, da das leuchtende Blau als Hinweis (Signifier) darauf dient, dass es sich um einen anklickbaren Link handelt.

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.

Externer Link
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.

Rechnung herunterladen
import { Link } from "@mittwald/flow-react-components";

<Link download>Rechnung herunterladen</Link>

States

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

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

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

Overview