Playground
Verwende <Link />, um einen Link darzustellen.
import { Link } from "@mittwald/flow-react-components"; <Link href="#">Zum Dashboard</Link>
Inline
Links innerhalb des <Text /> -Tags werden automatisch als Inline Link
gerendert.
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.
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.
States
Ein Link hat vier verschiedene States: Default, Hover, Pressed und Disabled.
Icons
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.
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.
Kombiniere mit ...
Button
Für hervorgehobene Call-to-Actions, bei denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll ist, kann ein Button im Link platziert werden.