BRAID
Braid Logo
 

TextLink

TextLink
Open in Playroom

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.
TextLink
Open in Playroom
By default, an icon will be leading the label, however this can be customised by setting the iconPosition to trailing.
Next
Open in Playroom

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.
promoteLight
infoLight
positiveLight
cautionLight
criticalLight
promote
info
positive
caution
critical
Open in Playroom

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>
Open in Playroom