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>

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

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.

<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

By default, Link renders an HTML a element and should be used with an href for navigation. For a non-navigation action, use as="button" without an href. This renders a button while retaining the Text Link styling.

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