Balance Logo
Balance
Reckon Design System
Open playroom

Text Link

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

Usage

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

Color

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

Size

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.

Disabled

The disabled prop can be used to disabled a TextLinkButton

Note

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