• TextLinkButton For a semantic button that looks like a link.
  • ButtonLink For a semantic link that looks like a button.
This component must be nested within a Text or Heading component.
To communicate a link as being already visited, set the showVisited prop.
This sentence contains a visited TextLink.
Open in Playroom
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.
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
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.