Link

The <Link> component is an interactive element that redirects users to different pages or sections within a website or application. It can also be used to enable file downloads, open the user's default email client to compose a new message, or show a specified address in a map application.

Anatomy

A link consists of text that indicates what the link will direct the user to. To distinguish a link from regular text, it is usually underlined.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Variant

Size

The selected theme does not has any options for "size".

Find your dream job at Reservix

Property	Type	Description
`variant`	`default \| secondary`	The available variants of this component.
`size`	`-`	The available sizes of this component.

Usage

Links serve as essential navigational tools in web design, enabling users to move seamlessly within an application, visit different websites or jump to specific elements on the same page. They can even be used to directly open apps to compose an email or make a call.

Using descriptive and meaningful labels for links is crucial to clearly indicate their destination. Generic phrases can leave users confused and helpless. Overusing links, especially inline, can overwhelm users and obscure their next steps. Use them sparingly to avoid clutter.

Provide a meaningful descriptive label to the link that clearly indicates the link's destination.

Don't

Don't use generic phrases like "click here" or "go to" on links.

Opening in new windows or tabs

Avoid opening links in new windows or tabs as it can be disorienting for users. It’s acceptable to do so only when necessary, such as when the link leads to an external site, or when there’s a risk of users losing their current place or task.

To support accessibility, ensure that such links include a warning for screen readers to alert users of the new window or tab. For more details on this practice, see the W3C guidelines.

Buttons or links

For actions that will change data, alter a state, or trigger a high-emphasis action, use a button instead of a link.

You can find more details on this on the button component page.

Phone numbers and emails

When using links with phone numbers (tel:) or emails (mailto:), it’s important to ensure they serve a clear navigational purpose while triggering specific actions. For example, a phone number link should automatically initiate a call when clicked, and an email link should open the user's email client.

Make sure that the link text and any accompanying icons clearly indicate the action that will be triggered and the intended destination.

Clearly indicate the action that will be triggered.

Don't

$Don\’t use vague labels without specifying how to reach out.$

Don’t use vague labels without specifying how to reach out.

Download links

Using the download attribute on an anchor element causes the browser to treat the linked URL as a download and allows setting a filename for the download.

Always indicate if a link triggers a download, and make the linked text clear about what will be downloaded, including the file type and size.

Preview

Code

Download your print@home tickets (PDF, 15kb)

Clearly indicate what will be downloaded, including the file type and size.

Don't

Don’t use download links without indicating they trigger a download.

Integrating with a router

The <Link> component can be seamlessly integrated with your app's router (like Tanstack Router, Next.js or React Router) to retain all the accessibility features and functionality of the <Link> component.

For more details, you can read about this integration on the "RouterProvider" page.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Link stories

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.

autoFocus?

boolean;

Whether the element should receive focus on render.

children?

ChildrenOrFunction<LinkRenderProps>;

The children of the component. A function may be provided to alter the children based on component state.

dir?

string;

disabled?

boolean;

The link can't be clicked

Defaults to:

"false"

download?

string | boolean;

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.

hidden?

boolean;

href?

string;

A URL to link to. See MDN.

hrefLang?

string;

Hints at the human language of the linked URL. SeeMDN.

inert?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLDivElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationIteration?

AnimationEventHandler<HTMLDivElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationStart?

AnimationEventHandler<HTMLDivElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLDivElement>;

onAuxClick?

MouseEventHandler<HTMLDivElement>;

onAuxClickCapture?

MouseEventHandler<HTMLDivElement>;

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.

onClickCapture?

MouseEventHandler<HTMLDivElement>;

onContextMenu?

MouseEventHandler<HTMLDivElement>;

onContextMenuCapture?

MouseEventHandler<HTMLDivElement>;

onDoubleClick?

MouseEventHandler<HTMLDivElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLDivElement>;

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.

onGotPointerCapture?

PointerEventHandler<HTMLDivElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

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.

onLostPointerCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCaptureCapture?

PointerEventHandler<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>;

onPointerCancel?

PointerEventHandler<HTMLDivElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLDivElement>;

onPointerDown?

PointerEventHandler<HTMLDivElement>;

onPointerDownCapture?

PointerEventHandler<HTMLDivElement>;

onPointerEnter?

PointerEventHandler<HTMLDivElement>;

onPointerLeave?

PointerEventHandler<HTMLDivElement>;

onPointerMove?

PointerEventHandler<HTMLDivElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOut?

PointerEventHandler<HTMLDivElement>;

onPointerOutCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOver?

PointerEventHandler<HTMLDivElement>;

onPointerOverCapture?

PointerEventHandler<HTMLDivElement>;

onPointerUp?

PointerEventHandler<HTMLDivElement>;

onPointerUpCapture?

PointerEventHandler<HTMLDivElement>;

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.

onScroll?

UIEventHandler<HTMLDivElement>;

onScrollCapture?

UIEventHandler<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>;

onTransitionCancel?

TransitionEventHandler<HTMLDivElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionEnd?

TransitionEventHandler<HTMLDivElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionRun?

TransitionEventHandler<HTMLDivElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionStart?

TransitionEventHandler<HTMLDivElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLDivElement>;

onWheel?

WheelEventHandler<HTMLDivElement>;

onWheelCapture?

WheelEventHandler<HTMLDivElement>;

ping?

string;

A space-separated list of URLs to ping when the link is followed. See MDN.

ref?

Ref<HTMLAnchorElement>;

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 {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

referrerPolicy?

HTMLAttributeReferrerPolicy;

How much of the referrer to send when following the link. See MDN.

rel?

string;

The relationship between the linked resource and the current page. See MDN.

routerOptions?

undefined;

Options for the configured client side router.

target?

HTMLAttributeAnchorTarget;

The target window for the link. See MDN.

translate?

"yes" | "no";

Button

For triggering actions instead of navigating.

RouterProvider

Integrating Marigold components in a router

Last update: 2 months ago

Anatomy

A link consists of text that indicates what the link will direct the user to. To distinguish a link from regular text, it is usually underlined.

Appearance

Variant

Size

The selected theme does not has any options for "size".

Find your dream job at Reservix

Property	Type	Description
`variant`	`default \| secondary`	The available variants of this component.
`size`	`-`	The available sizes of this component.

Usage

Provide a meaningful descriptive label to the link that clearly indicates the link's destination.

Don't

Don't use generic phrases like "click here" or "go to" on links.

Opening in new windows or tabs

To support accessibility, ensure that such links include a warning for screen readers to alert users of the new window or tab. For more details on this practice, see the W3C guidelines.

Buttons or links

For actions that will change data, alter a state, or trigger a high-emphasis action, use a button instead of a link.

You can find more details on this on the button component page.

Phone numbers and emails

Make sure that the link text and any accompanying icons clearly indicate the action that will be triggered and the intended destination.

Clearly indicate the action that will be triggered.

Don't

$Don\’t use vague labels without specifying how to reach out.$

Don’t use vague labels without specifying how to reach out.

Download links

Using the download attribute on an anchor element causes the browser to treat the linked URL as a download and allows setting a filename for the download.

Always indicate if a link triggers a download, and make the linked text clear about what will be downloaded, including the file type and size.

Preview

Code

Download your print@home tickets (PDF, 15kb)

Clearly indicate what will be downloaded, including the file type and size.

Don't

Don’t use download links without indicating they trigger a download.

Integrating with a router

For more details, you can read about this integration on the "RouterProvider" page.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Link stories

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.

autoFocus?

boolean;

Whether the element should receive focus on render.

children?

ChildrenOrFunction<LinkRenderProps>;

The children of the component. A function may be provided to alter the children based on component state.

dir?

string;

disabled?

boolean;

The link can't be clicked

Defaults to:

"false"

download?

string | boolean;

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.

hidden?

boolean;

href?

string;

A URL to link to. See MDN.

hrefLang?

string;

Hints at the human language of the linked URL. SeeMDN.

inert?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLDivElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationIteration?

AnimationEventHandler<HTMLDivElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationStart?

AnimationEventHandler<HTMLDivElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLDivElement>;

onAuxClick?

MouseEventHandler<HTMLDivElement>;

onAuxClickCapture?

MouseEventHandler<HTMLDivElement>;

onBlur?

(e: FocusEvent<Element, Element>) => void;

Handler that is called when the element loses focus.

onClick?

(e: MouseEvent<FocusableElement, MouseEvent>) => void;

onClickCapture?

MouseEventHandler<HTMLDivElement>;

onContextMenu?

MouseEventHandler<HTMLDivElement>;

onContextMenuCapture?

MouseEventHandler<HTMLDivElement>;

onDoubleClick?

MouseEventHandler<HTMLDivElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLDivElement>;

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.

onGotPointerCapture?

PointerEventHandler<HTMLDivElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

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.

onLostPointerCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCaptureCapture?

PointerEventHandler<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>;

onPointerCancel?

PointerEventHandler<HTMLDivElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLDivElement>;

onPointerDown?

PointerEventHandler<HTMLDivElement>;

onPointerDownCapture?

PointerEventHandler<HTMLDivElement>;

onPointerEnter?

PointerEventHandler<HTMLDivElement>;

onPointerLeave?

PointerEventHandler<HTMLDivElement>;

onPointerMove?

PointerEventHandler<HTMLDivElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOut?

PointerEventHandler<HTMLDivElement>;

onPointerOutCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOver?

PointerEventHandler<HTMLDivElement>;

onPointerOverCapture?

PointerEventHandler<HTMLDivElement>;

onPointerUp?

PointerEventHandler<HTMLDivElement>;

onPointerUpCapture?

PointerEventHandler<HTMLDivElement>;

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.

onScroll?

UIEventHandler<HTMLDivElement>;

onScrollCapture?

UIEventHandler<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>;

onTransitionCancel?

TransitionEventHandler<HTMLDivElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionEnd?

TransitionEventHandler<HTMLDivElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionRun?

TransitionEventHandler<HTMLDivElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionStart?

TransitionEventHandler<HTMLDivElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLDivElement>;

onWheel?

WheelEventHandler<HTMLDivElement>;

onWheelCapture?

WheelEventHandler<HTMLDivElement>;

ping?

string;

A space-separated list of URLs to ping when the link is followed. See MDN.

ref?

Ref<HTMLAnchorElement>;

referrerPolicy?

HTMLAttributeReferrerPolicy;

How much of the referrer to send when following the link. See MDN.

rel?

string;

The relationship between the linked resource and the current page. See MDN.

routerOptions?

undefined;

Options for the configured client side router.

target?

HTMLAttributeAnchorTarget;

The target window for the link. See MDN.

translate?

"yes" | "no";

Button

For triggering actions instead of navigating.

RouterProvider

Integrating Marigold components in a router

Last update: 2 months ago