Verwende Links, um z.B. ...
-
zu einer anderen Seite zu navigieren.
-
zu einem Anker auf der Seite zu scrollen.
-
eine externe Seite zu öffnen.
-
einen Download zu starten.
Overview
Develop
Guidelines
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.
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.
import { Link } from "@mittwald/flow-react-components"; <Link href="#">Primary</Link>
import { Link } from "@mittwald/flow-react-components"; <Link href="#" color="light"> Light </Link>
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 soll den User darauf hinweisen, dass es sich um einen
externen Link handelt, der in einem neuen Tab geöffnet wird. Das Icon wird auch
automatisch neben dem Link angezeigt, wenn auf dem Link target="_blank"
gesetzt ist.
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.
import { Link } from "@mittwald/flow-react-components"; <Link href="#" isDisabled> Disabled </Link>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
inline | boolean | - | Whether the link should be styled for being displayed inside a text. |
linkComponent | ComponentType<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> | - | An alternative link component. |
color | "light" | "dark" | "primary" | "primary" | The color of the link. |
slot | string | - | |
style | CSSProperties | ((values: LinkRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | - | The inline style for the element. A function may be provided to compute the style based on component state. |
isDisabled | boolean | - | Whether the link is disabled. |
autoFocus | boolean | - | Whether the element should receive focus on render. |
rel | string | - | The relationship between the linked resource and the current page. See MDN. |
target | HTMLAttributeAnchorTarget | - | The target window for the link. See MDN. |
href | string | - | A URL to link to. See MDN. |
download | string | boolean | - | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN. |
hrefLang | string | - | Hints at the human language of the linked URL. SeeMDN. |
ping | string | - | A space-separated list of URLs to ping when the link is followed. See MDN. |
referrerPolicy | HTMLAttributeReferrerPolicy | - | How much of the referrer to send when following the link. See MDN. |
routerOptions | undefined | - | Options for the configured client side router. |
children | ReactNode | - | |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | - | |
className | string | - | The elements class name. |
ref | Ref<HTMLAnchorElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set |
key | Key | - |
Grundlagen
Best practices
Achte bei Verwendung eines Links darauf, dass...
- je nach Umgebung der richtige Link gewählt wird. Ein Inline Link wird automatisch in einem Textblock gesetzt. Bei farbigem Hintergrund muss die Color Light oder Dark selbst ausgewählt werden.
- Links standardmäßig im gleichen Tab geöffnet werden. User haben dann immer noch die Möglichkeit, die Links selbstgesteuert in einem neuen Tab zu öffnen. Bei bestimmten externen Links wird jedoch eine Ausnahme gemacht. (siehe Externer Link)
- Links nur als Navigationselement gedacht sind. Links können z. B. keine Modals öffnen, keine Aktionen bestätigen und keine weiteren Informationen aufklappen lassen (Accordion).
- nicht zu viele Links verwendet werden, um den User nicht durch die Anzahl zu verwirren.
- Links entweder einzeln stehen oder in einen Textblock integriert werden (Inline Link). Andernfalls ist es für den User schwieriger, den Link zu erkennen. Beispielsweise sollte ein Link nicht in der Überschrift stehen.
Verwendung
Verwende einen Link, um...
- den User zu einer neuen Seite zu navigieren.
- auf einen Ankerpunkt auf der Seite für eine Information zu scrollen.
- einen Download zu starten.
- eine externe Seite zu öffnen.
Link vs. Button
Links und Buttons werden häufig verwechselt. Um die beiden besser unterscheiden zu können, hier ein paar hilfreiche Anhaltspunkte.
Verwende Buttons, um z.B. ...
Anwendung
Position
Links sind ein zentrales Navigationselement für die User. Daher sollte deren Platzierung sorgfältig überlegt werden. Beispiele für geeignete Stellen sind:
- In einer Section können Links in der oberen rechten Ecke neben der Heading platziert werden. Diese Position eignet sich besonders für Links, die inhaltlich stark mit der Section verbunden sind, und wenn nur ein einzelner Link benötigt wird.
- Im unteren Bereich einer Section oder eines Textblocks können ein oder mehrere Links angezeigt werden. Diese sollten sich auf den vorangehenden Text beziehen.
- Inline Links werden direkt im Text eingefügt.
Do
Die Section verfügt über einen speziellen Bereich in der Nähe der Heading, in dem Links platziert werden können.
Do
Links können am Ende einer Section oder eines Textblocks angezeigt werden.
Inhalt
Interne und externe Links
Interne Links öffnen sich immer im dem Tab, in dem der User sich gerade
befindet. Der User kann jedoch selbst entscheiden, ob er den Link lieber in
einem neuen Tab öffnen möchte. Externe Links öffnen sich immer in einem neuen
Tab. Um das Verhalten dem User zu verdeutlichen, muss neben dem Text das Icon
IconExternalLink angezeigt werden.
Writing guidelines
Der Linktext ist der wichtigste Bestandteil eines Links. Versuche daher auf folgendes zu achten:
- Verwende für Links, die auf dieselbe Seite verweisen, immer denselben Text. Unterschiedliche Zielseiten sollten unterschiedliche Linktexte haben, um Verwirrung zu vermeiden.
- Vermeide generische Formulierungen wie „Klick hier“. Der Linktext sollte klar vermitteln, wohin der Link führt oder was dort zu erwarten ist.
- Formuliere Linktexte so präzise wie möglich, damit sofort erkennbar ist, wohin der Link führt. Allgemeine Formulierungen wie „Erfahre mehr“ sollten vermieden werden, da diese oft überflüssig sind. Falls nötig, ergänze „Erfahre mehr“ mit spezifischen Informationen, z. B. „Erfahre mehr über Flow“.
- Wenn ein Link in einem Satz vorkommt, verlinke nur den Teil des Satzes, der direkt auf das Ziel hinweist. Der gesamte Satz sollte nicht als Link markiert werden. Vermeide es, den Link in mehrere kleinere Teile innerhalb des Satzes aufzuteilen; stattdessen sollte ein zusammenhängender Link innerhalb des Satzes zu finden sein.
- Halte Linktexte so kurz wie möglich, um Zeilenumbrüche zu vermeiden. Ein einzelnes Wort oder eine kurze Phrase sind ideal.
- Setze am Ende des Linktextes keinen Punkt. Eine Ausnahme bilden Fragezeichen, falls sie dem Satzbau entsprechen.
Links sind wichte Navigationselemente innerhalb von Benutzeroberflächen.Erfahre mehr über Links
Do
Der Link "Erfahre mehr über Links" kann auch alleine stehend vom User verstanden werden.
Links sind wichte Navigationselemente innerhalb von Benutzeroberflächen.Erfahre mehr
Don't
Links müssen einzeln verstanden werden. "Erfahre mehr" oder "Klick hier" sind nicht alleine verständlich.
Mit Hilfe des Onboardings kannst du direkt loslegen.
Do
Inline Links sollten so kurz wie möglich, aber so lang sein, dass der User versteht, wohin sie führen.
Don't
Markiere keine ganzen Sätze als Inline Link.
Accessibility
Achte beim Link darauf, dass er gut von Screenreadern erfasst wird. Ein Link muss auch isoliert betrachtet verständlich sein. Das ist nicht der Fall, wenn der Linktext nur „hier klicken“ oder „mehr Informationen“ lautet. Bei Bedarf sollte ein ARIA-Label hinzugefügt werden, um sicherzustellen, dass der Link korrekt interpretiert wird, falls der Text allein nicht ausreicht.
Color Light und Dark
Achte bei den Colors Light und Dark auf genügend Kontrast zum Hintergrund. Es wird empfohlen, die Color in Light zu verwenden, wenn der HSL Lightness-Wert des Hintergrunds weniger als 50 ist. Die Color Dark wird für Hintergründe empfohlen, die einen HSL Lightness-Wert von größer als 50 haben. Für beide Colors gilt: Je weiter der HSL Lightness-Wert von 50 entfernt ist, desto besser ist der Kontrast.
Do
Die Color Light kommt besonders gut auf sehr dunklen Hintergründen zur Geltung. Verwende sie auf Hintergründen mit einem HSL Lightness-Wert von weniger als 50.
Do
Color Dark kommt besonders gut auf sehr hellen Hintergründen zur Geltung. Verwende sie auf Hintergründen mit einem HSL Lightness-Wert von über 50.