Balance Logo
Balance
Reckon Design System

Text Link

Text links take users to another place in the application.
Install
pnpm add @reckon-web/text-link
Import usage
import {
TextLink,
TextLinkButton
} from '@reckon-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.

This is some text with a text link
Open 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.

A text link using the base text color

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.

A text link with a small font size

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.

Visually a link, with button semantics

Note

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

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