Skip to content
Telescope
Components

Link

Text that navigates the user from one page to another.
Go to Pleo.io

Features

  • Can match the font size of the text it's part of.
  • Can display an icon next to the link text.
  • Compatible with external routing libraries.

Examples

With an icon

An icon can be added to the left or right of the Link text to support its meaning. This feature should only be used when the Link isn't part of a sentence.

Show code
<Link IconLeft={ArrowLeft}>Back to Settings</Link>
Show code
<Link IconRight={ArrowRight}>Manage Payments</Link>

Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

Show code
<Link skeleton IconRight={ArrowRight}>
    Manage Payments
</Link>

Related components

  • Action banner: A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
  • Button: A clickable element which communicates that users can trigger an action.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page