---
title: "Text Link — React"
canonical: https://sky-ui.cf.sky.com/components/text-link/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Text Link — React

The Text Link makes text actionable.

```js
import { Link } from '@sky-uk/ui-core';
```

---

```tsx
<Link href="http://www.sky.co.uk">Link text</Link>
```

---

## Props

| Prop | type | Default | Description |
| --- | --- | --- | --- |
| $appearance | string | undefined | Set `$appearance` to `light` for an inverted colourway for use on dark backgrounds. |
| $inline | boolean | false | Inline links inherit font size and weight. Inline link style can be set using the `$inline` property. |
| $hover | boolean | false | Force the hover state to show, useful when rendering a "faux" link when the parent element is clickable. |
| $focused | boolean | false | Force the focus state to show, useful when rendering a "faux" link when the parent element is clickable. |

---

## Chevron

**Note:** The `chevron` prop has been deprecated. Instead you can use `Icon` component to compose link with chevron. It gives flexibility of alignment and icon to use.

```tsx
<Flex $gap={5}>
  <Link href="http://www.sky.co.uk">
    <Icon
      src={chevronLeftLinear}
      $marginRight={1}
      $size="small"
    />
    Link with right Chevron
  </Link>

  <Link href="http://www.sky.co.uk">
    Link with left Chevron
    <Icon
      src={chevronRightLinear}
      $marginLeft={1}
      $size="small"
    />
  </Link>
</Flex>
```

---

## Accessibility

### Link with onClick

The `Link` is a styled HTML `a` element and should **always** be used with an `href`. When using the `Link` component without an `href`, please make sure to use `as="button"` to ensure the correct semantic element is used.

```tsx
  <Link as="button" onClick={() => console.log("Do the thing")}>Perform action</Link>
```

---

## System Modifiers

The `TextLink` component also supports the props applied using the following system modifiers:

- [display](/core/system/display/)
- [flex-parent](/core/system/flex-parent/)
- [flex-child](/core/system/flex-child/)
- [margin](/core/system/margin/)
- [width](/core/system/width/)