v1.0.11

Text Link

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/text-link

npm @spark-web/text-link

Source GitHub.com

Bundle unpkg.com

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.

This is some text containing a text link

Open in Playroom

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

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

A text link inheriting the parent's “small” font-size

Open in Playroom

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

<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

Prop	Type	Description
href	string	URL to be used for the link (passed to the underlying anchor element).
data?	DataAttributeMap	Sets data attributes on the component.

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.

Visually a link, with button semantics

Open in Playroom

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

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

Props

Prop	Type	Description
data?	DataAttributeMap	Sets data attributes on the component.

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