Text Link

Usage

Text links take users to another place in the application, and usually appear within or directly following a sentence. Styled to resemble a hyperlink.

<Text>
  This is some text with a <TextLink href="#">text link</TextLink>
</Text>

Color

For cases with many rows of links, like tables, you may want to use the "base" text color to avoid overloading the user.

<Text>
  A text link using the{' '}
  <TextLink href="#" color="base">
    base text color
  </TextLink>
</Text>

Size

This will render a component where the text-link font size is determined by the parent component.

The font-size is inherited from the parent Text component.

<Text size="small">
  A text link with a <TextLink href="#">small font size</TextLink>
</Text>

External link

Links can be set to open in a new tab by using the native anchor prop target=_blank.

An ExternalLinkIcon will be renderred after text when target="_blank based on the text size.

<Text size="small">
  <TextLink href="#" target="_blank">
    External link
  </TextLink>
</Text>

Note: External links are styled differently based on their :visited state.

Custom link

This component renders a native anchor element by default, which can be customised via the linkComponent prop on the Core component.

Text link button

Even though it looks like a TextLink, this is actually a semantic button.

<Text>
  <TextLinkButton>Visually a link, with button semantics</TextLinkButton>
</Text>

Disabled

The disabled prop can be used to disabled a TextLinkButton

<TextLinkButton disabled>Disabled</TextLinkButton>

Note

This component must be nested within a Text or Heading component.