TextLink

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.

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.

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.