Skip to main content
Kaleidoscope

Link

HW

Links navigate users to a new page or context. They can be used inline with other text or as a standalone element.

Default

A basic link just takes an href prop for a url and will link to that page. Pages on the same origin (e.g. /pages/page-name) will open in the same tab, while external links (e.g. https://google.com) will open in a new tab.

Editable example

Best practices

  • For links that are the primary action on a page, and would be considered an action by users, use a Button with an href instead.
  • Try stick to at least one full word, but no longer than a few words. Avoid long sentences within link text.
  • Avoid using a URL itself as link text. URLs can be long and garbled and a short text description is much more meaningful.

Icons

Links can be given an iconStart and iconEnd to render an icon on either side.

Editable example

Font size

Link will inherit the font-size from its parent. It's recommended to use the font-size of its surrounding text rather than giving a link its own font-size.

Editable example

Animation

The iconAnimation prop can be given a LinkIconAnimation enum property to determine how the icon animates on hover. Use the animation to indicate intent of the link. SlideStart combined with a directional arrow suggests the user will navigate back to somewhere previous, while SlideEnd paired with a directional arrow indicates the user will be taken forward in a sequence.

Editable example

Security

Cross-origin links are unsafe, so the Link component will automatically use rel="noreferrer noopener" when provided an external href to prevent cross-origin websites gathering information about where the user clicked the link from. This can be opted out of by providing an empty string rel="" attribute. External links will also automatically use target="_blank", which can be overridden by explicitly specifying a target target="_self".

Editable example

Accessibility

  • Screen readers can list out all of the links on a page, and can be a way for users to quickly navigate content. In this context a bunch of "click here" links become meaningless.
  • Try do be descriptive with link text. Avoid generic text like "click here" or "view more" and instead integrate information about that link into the link's text. It doesn't have to be long and complex — something as simple as "Quote block docs" is much more meaningful than "learn more".