# Link

Text that navigates the user from one page to another.

Tabs: [Guidelines](/components/web/link/link.guidelines.md) · [Code](/components/web/link/link.code.md)

## 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.

```tsx
<Link IconLeft={ArrowLeft}>Back to Settings</Link>
```

```tsx
<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.

```tsx
<Link skeleton IconRight={ArrowRight}>
    Manage Payments
</Link>
```

## Related components

- [Action banner](/components/web/action-banner/action-banner.guidelines): A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
- [Button](/components/web/button/button.guidelines): A clickable element which communicates that users can trigger an action.