Balance Logo
Reckon Design System
Open playroom

Text Link

Text links take users to another place in the application.
pnpm add @balance-web/text-link
Import usage
import {
} from '@balance-web/text-link';
  • Code
  • API


Text links take users to another place in the application, and usually appear within or directly following a sentence. Styled to resemble a hyperlink.

Edit in Playroom


For cases with many rows of links, like tables, you may want to use the "base" text color to avoid overloading the user.


This will render a component where the text-link font size is determined by the parent component.

The font-size is inherited from the parent Text component.

Links can be set to open in a new tab by using the native anchor prop target=_blank.

An ExternalLinkIcon will be renderred after text when target="_blank based on the text size.

Note: External links are styled differently based on their :visited state.

This component renders a native anchor element by default, which can be customised via the linkComponent prop on the Core component.

Even though it looks like a TextLink, this is actually a semantic button.


The disabled prop can be used to disabled a TextLinkButton


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

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo