Text Link - React

View on Figma View on GitHub

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

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

<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

Thechevron prop has been deprecated. Instead you can use Icon component to compose link with chevron. It gives flexibility of alignment and icon to use.

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

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

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

<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: