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.
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.
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.
States
Ein Link hat vier verschiedene States: Default, Hover, Pressed und Disabled.