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
`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`	default (default) \| dark \| light \| dark-static \| light-static	The color of the link.
`slot`	string	The name of the slot the link is placed in.
`whiteSpace`	WhiteSpace	The whiteSpace css value of the element.
`size`	s \| m (default)	The size of the element.
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`translate`	yes \| no
`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.
`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.
`dir`	string
`lang`	string
`hidden`	boolean
`inert`	boolean
`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](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
`target`	HTMLAttributeAnchorTarget	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
`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).
`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).
`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`	HTMLAttributeReferrerPolicy	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).
`routerOptions`	undefined	Options for the configured client side router.
`children`	ReactNode
`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.
`ref`	Ref<HTMLSpanElement>	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	Key
`className`	string	The elements class name.

Events

Property	Type	Description
`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.
`onClickCapture`	MouseEventHandler<HTMLDivElement>
`onAuxClick`	MouseEventHandler<HTMLDivElement>
`onAuxClickCapture`	MouseEventHandler<HTMLDivElement>
`onContextMenu`	MouseEventHandler<HTMLDivElement>
`onContextMenuCapture`	MouseEventHandler<HTMLDivElement>
`onDoubleClick`	MouseEventHandler<HTMLDivElement>
`onDoubleClickCapture`	MouseEventHandler<HTMLDivElement>
`onMouseDown`	MouseEventHandler<HTMLDivElement>
`onMouseDownCapture`	MouseEventHandler<HTMLDivElement>
`onMouseEnter`	MouseEventHandler<HTMLDivElement>
`onMouseLeave`	MouseEventHandler<HTMLDivElement>
`onMouseMove`	MouseEventHandler<HTMLDivElement>
`onMouseMoveCapture`	MouseEventHandler<HTMLDivElement>
`onMouseOut`	MouseEventHandler<HTMLDivElement>
`onMouseOutCapture`	MouseEventHandler<HTMLDivElement>
`onMouseOver`	MouseEventHandler<HTMLDivElement>
`onMouseOverCapture`	MouseEventHandler<HTMLDivElement>
`onMouseUp`	MouseEventHandler<HTMLDivElement>
`onMouseUpCapture`	MouseEventHandler<HTMLDivElement>
`onTouchCancel`	TouchEventHandler<HTMLDivElement>
`onTouchCancelCapture`	TouchEventHandler<HTMLDivElement>
`onTouchEnd`	TouchEventHandler<HTMLDivElement>
`onTouchEndCapture`	TouchEventHandler<HTMLDivElement>
`onTouchMove`	TouchEventHandler<HTMLDivElement>
`onTouchMoveCapture`	TouchEventHandler<HTMLDivElement>
`onTouchStart`	TouchEventHandler<HTMLDivElement>
`onTouchStartCapture`	TouchEventHandler<HTMLDivElement>
`onPointerDown`	PointerEventHandler<HTMLDivElement>
`onPointerDownCapture`	PointerEventHandler<HTMLDivElement>
`onPointerMove`	PointerEventHandler<HTMLDivElement>
`onPointerMoveCapture`	PointerEventHandler<HTMLDivElement>
`onPointerUp`	PointerEventHandler<HTMLDivElement>
`onPointerUpCapture`	PointerEventHandler<HTMLDivElement>
`onPointerCancel`	PointerEventHandler<HTMLDivElement>
`onPointerCancelCapture`	PointerEventHandler<HTMLDivElement>
`onPointerEnter`	PointerEventHandler<HTMLDivElement>
`onPointerLeave`	PointerEventHandler<HTMLDivElement>
`onPointerOver`	PointerEventHandler<HTMLDivElement>
`onPointerOverCapture`	PointerEventHandler<HTMLDivElement>
`onPointerOut`	PointerEventHandler<HTMLDivElement>
`onPointerOutCapture`	PointerEventHandler<HTMLDivElement>
`onGotPointerCapture`	PointerEventHandler<HTMLDivElement>
`onGotPointerCaptureCapture`	PointerEventHandler<HTMLDivElement>
`onLostPointerCapture`	PointerEventHandler<HTMLDivElement>
`onLostPointerCaptureCapture`	PointerEventHandler<HTMLDivElement>
`onScroll`	UIEventHandler<HTMLDivElement>
`onScrollCapture`	UIEventHandler<HTMLDivElement>
`onWheel`	WheelEventHandler<HTMLDivElement>
`onWheelCapture`	WheelEventHandler<HTMLDivElement>
`onAnimationStart`	AnimationEventHandler<HTMLDivElement>
`onAnimationStartCapture`	AnimationEventHandler<HTMLDivElement>
`onAnimationEnd`	AnimationEventHandler<HTMLDivElement>
`onAnimationEndCapture`	AnimationEventHandler<HTMLDivElement>
`onAnimationIteration`	AnimationEventHandler<HTMLDivElement>
`onAnimationIterationCapture`	AnimationEventHandler<HTMLDivElement>
`onTransitionCancel`	TransitionEventHandler<HTMLDivElement>
`onTransitionCancelCapture`	TransitionEventHandler<HTMLDivElement>
`onTransitionEnd`	TransitionEventHandler<HTMLDivElement>
`onTransitionEndCapture`	TransitionEventHandler<HTMLDivElement>
`onTransitionRun`	TransitionEventHandler<HTMLDivElement>
`onTransitionRunCapture`	TransitionEventHandler<HTMLDivElement>
`onTransitionStart`	TransitionEventHandler<HTMLDivElement>
`onTransitionStartCapture`	TransitionEventHandler<HTMLDivElement>
`onFocus`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element receives focus.
`onBlur`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element loses focus.
`onFocusChange`	((isFocused: boolean) => void)	Handler that is called when the element's focus status changes.
`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.
`onPressStart`	((e: PressEvent) => void)	Handler that is called when a press interaction starts.
`onPressEnd`	((e: PressEvent) => void)	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	((isPressed: boolean) => void)	Handler that is called when the press state changes.
`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.
`onHoverStart`	((e: HoverEvent) => void)	Handler that is called when a hover interaction starts.
`onHoverEnd`	((e: HoverEvent) => void)	Handler that is called when a hover interaction ends.
`onHoverChange`	((isHovering: boolean) => void)	Handler that is called when the hover state changes.

Accessibility

Property	Type	Description
`aria-current`	string	Marks the link as the currently active one, e.g. in a navigation.
`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.
`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.

Components

Integrations