---
title: TextLink
description:
  Text links take users to another place in the application, and usually appear
  within or directly following a sentence. Styled to resemble a hyperlink.
category: Navigation
---

## Example

```jsx {% live=true %}
<Text>
  Some text containing a <TextLink href="#">text link</TextLink>.
</Text>
```

## Props

### Prominence

The `default` prominence is the same colour as surrounding text. Its subdued
appearance is ideal for dense interfaces, where many links grouped together
could be overwhelming for users.

```jsx {% live=true %}
<Text>
  The <TextLink prominence="default">quick brown fox</TextLink> jumps over the
  lazy dog.
</Text>
```

Use `high` prominence to call attention to important links.

```jsx {% live=true %}
<Text>
  The <TextLink prominence="high">quick brown fox</TextLink> jumps over the lazy
  dog.
</Text>
```

## Patterns

### Accessibility

When no `href` is provided, the component is rendered as a `button` element.

```jsx {% live=true %}
<TextLink onPress={e => alert(`Pressed "${e.target.textContent}"`)}>
  A semantic button, with the appearance of a text link.
</TextLink>
```

### Custom link component

This component renders a native anchor element by default, which
[can be customised](/package/link/link-component) via the `"linkComponent"` prop
on the `KeystarProvider`.
