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.

Design considerations

By default, a TextLink uses colour and underline on hover to create affordance. Optionally you can decrease their visual weight by setting weight to weak.

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