Link

A link allows a user to navigate to another page or resource within a web page or application.

Effective Practices

When using links, consider the following best practices:

Use clear link wording.
Don’t repeat the URL as part of the link text.
Don’t say “link” or “links to” in the link text.
Keep your link text as short as possible.
Minimize instances where multiple copies of the same text are linked to different places, such as “Click here”.

Usage Guidelines

Use clear messaging to create links that fit your needs and guide your users.

We’ve provided some examples to get you started.

Example

<Link
  href="https://en.wikipedia.org/wiki/Butterfly"
  rel="noopener noreferrer nofollow"
  target="_blank"
>
  Learn more about butterflies (opens in a new window)
</Link>

<Link href="https://www.weather.com">Weather (opens in a this window)</Link>

<Link href="#effective-practices">
  Effective practices (navigates to another location within the page)
</Link>

Props

interface LinkProps

isDisabled ? boolean

Whether the link is disabled.

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.

onClick ? (e: 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.

autoFocus ? boolean

Whether the element should receive focus on render.

onFocus ? (e: FocusEvent) => void

Handler that is called when the element receives focus.

onBlur ? (e: FocusEvent) => 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.

href ? string

A URL to link to. See MDN.

hrefLang ? string

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

target ? HTMLAttributeAnchorTarget

The target window for the link. See MDN.

rel ? string

The relationship between the linked resource and the current page. 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.

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.

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.

children ? ChildrenOrFunction

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

className ? ClassNameOrFunction

The CSS className for the element. A function may be provided to compute the class based on component state.

style ? StyleOrFunction

The inline style for the element. A function may be provided to compute the style based on component state.

slot ? string | null

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.