Alternatives

  • TextLinkButton For a semantic button that looks like a link.
  • ButtonLink For a semantic link that looks like a button.

Note

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

Visited links

To communicate a link as being already visited, set the showVisited prop.
This sentence contains a visited TextLink.
Open in Playroom

Icons

For decoration or help distinguishing between links, an icon can be provided.
By default, an icon will be leading the label, however this can be customised by setting the iconPosition to trailing.

Design considerations

By default, a TextLink will follow the link colour of the theme and use a medium font weight to create affordance against surrounding text.Optionally, you can decrease the visual weight by setting weight to weak — with the link now following the default text colour and weight.
This sentence contains a weak TextLink.
Open in Playroom

Custom link rendering

This component renders a native a element by default, but this can be customised via the linkComponent prop on BraidProvider.

Contextual design

To avoid clashing colours, when on a background other than surface, body or neutralLight, TextLink will default its weight to weak. In addition, when placed on a dark background, it may be inverted based on the contrast rules of Text.This behaviour can be overridden by specifying a weight of regular.

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<TextLink
  data={{ testid: 'text-link-1' }}
  // => data-testid="text-link-1"
>
  ...
</TextLink>