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
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: 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.
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.