title: Text Link storybookPath: navigation-textlink--default isExperimentalPackage: true

NOTE: These components must be nested within a Text or Heading component.

TextLink

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 containing a <TextLink href="#">text link</TextLink>
</Text>

Examples

Size

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

<Text size="small">
  A <TextLink href="#">text link</TextLink> inheriting the parent's “small”
  font-size
</Text>

Custom link

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

Props

The TextLink component also extends native HTML a anchor props and are not listed here.

TextLinkButton

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

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

Props

The TextLinkButton component also extends native HTML span props and are not listed here.