Link

Ein Link navigiert zu einer anderen Seite, einem Anker oder startet Downloads.

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

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

Best Practices

Nutze Links zum Navigieren und Buttons‍ für Aktionen. Eine Ausnahme können hervorgehobene Call-to-Actions sein, bei denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll ist.
Halte den Linktext kurz, prägnant und in seiner Absicht klar erkennbar.
Ergänze ein aria-label, wenn der Linktext allein nicht eindeutig ist.
Öffne externe Links in einem neuen Tab, interne im gleichen.

Link vs. Button

Verwende für Navigation bevorzugt Links und für Aktionen Buttons. Eine Ausnahme können hervorgehobene Call-to-Actions‍ sein, bei denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll ist.

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.

Verwende Buttons, um z. B. ...

eine Aktion auszuführen oder ein Event zu starten, ohne die Seite zu verlassen.
Formulare zu speichern oder zurückzusetzen.
in einem Modal‍ Aktionen auszuwählen.

Color

Auf farbigen oder dekorativen Hintergründen kann der Link in Light und Dark dargestellt werden, um ausreichend Kontrast zu erreichen. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter Color‍.

Light‍

Dark‍

Disabled

Nutze das Property isDisabled, um einen Link als disabled darzustellen. Achte dabei darauf, dass aus dem Kontext klar wird, warum der Link gerade nicht zur Verfügung steht.

Disabled‍

Inline

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

Sieh dir unser Onboarding‍ an, um weitere Informationen zu erhalten.

Externe Links und Downloads

Interne Links öffnen sich immer in 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.

Externer Link

Externe Links – also Verweise auf eine andere Domain – öffnen sich immer in einem neuen Tab. Sobald target="_blank" gesetzt ist, wird automatisch das IconExternalLink angezeigt, um dieses Verhalten zu verdeutlichen.

Externer 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‍

Kombiniere mit …

Section

Platziere einen Link im Header einer Section‍ neben der Heading‍, um ihn inhaltlich mit der Section zu verknüpfen.

Heading 2

Textlink‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Zum mStudio‍

Properties

Property	Type	Description
`autoFocus`	boolean	Whether the element should receive focus on render.
`children`	ReactNode
`className`	string	The elements class name.
`color`	default (default) \| dark \| light \| dark-static \| light-static	The color of the link.
`dir`	string
`download`	string \| boolean	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
`hidden`	boolean
`href`	string	A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
`hrefLang`	string	Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	boolean
`inline`	boolean	Whether the link should be styled for being displayed inside a text.
`isDisabled`	boolean	Whether the link is disabled.
`lang`	string
`linkComponent`	ComponentType<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">>	An alternative link component.
`ping`	string	A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
`referrerPolicy`	\| no-referrer \| no-referrer-when-downgrade \| origin \| origin-when-cross-origin \| same-origin \| strict-origin \| strict-origin-when-cross-origin \| unsafe-url	How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
`rel`	string	The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
`render`	DOMRenderFunction<"div", TooltipRenderProps>	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`routerOptions`	undefined	Options for the configured client side router.
`size`	s \| m (default)	The size of the element.
`slot`	string	The name of the slot the link is placed in.
`style`	StyleOrFunction<TooltipRenderProps>	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`target`	HTMLAttributeAnchorTarget	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
`translate`	yes \| no
`whiteSpace`	WhiteSpace	The whiteSpace css value of the element.
`wrapWith`	ReactElement<unknown, string \| JSXElementConstructor<any>>	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

Property	Type	Description
`onBlur`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element loses focus.
`onClick`	((e: MouseEvent<FocusableElement, MouseEvent>) => void)	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.
`onFocus`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element receives focus.
`onFocusChange`	((isFocused: boolean) => void)	Handler that is called when the element's focus status changes.
`onHoverChange`	((isHovering: boolean) => void)	Handler that is called when the hover state changes.
`onHoverEnd`	((e: HoverEvent) => void)	Handler that is called when a hover interaction ends.
`onHoverStart`	((e: HoverEvent) => void)	Handler that is called when a hover interaction starts.
`onKeyDown`	((e: KeyboardEvent) => void)	Handler that is called when a key is pressed.
`onKeyUp`	((e: KeyboardEvent) => void)	Handler that is called when a key is released.
`onPress`	((e: PressEvent) => void)	Handler that is called when the press is released over the target.
`onPressChange`	((isPressed: boolean) => void)	Handler that is called when the press state changes.
`onPressEnd`	((e: PressEvent) => void)	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressStart`	((e: PressEvent) => void)	Handler that is called when a press interaction starts.
`onPressUp`	((e: PressEvent) => void)	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

Accessibility

Property	Type	Description
`aria-current`	string	Marks the link as the currently active one, e.g. in a navigation.
`aria-describedby`	string	Identifies the element (or elements) that describes the object.
`aria-details`	string	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	string	Defines a string value that labels the current element.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element.

Components

Integrations