Balance Logo
Balance
Reckon Design System

Text

Constrained, purposeful set of text styles as a component.
Install
pnpm add @reckon-web/text
Import usage
import {
Text,
useOverflowStrategy,
DefaultTextPropsProvider,
useDefaultTextProps
} from '@reckon-web/text';
  • Code
  • API

Usage

Size

There are five font sizes available, medium is the default.

Edit in Playroom

Weight

There are five font weights available, regular is the default.

Color

You may apply alternative theme colors to the text, base is the default.

Leading

Tighten or loosen the leading of your content. This translates to line-height in CSS.

Inline

Render the Text as an "inline" element.

Overflow strategy

Use the overflowStrategy prop to manage how Text behaves with regard to overflow.

For client side routing with Next, use as={NextLink}.

import { NextLink } from '@reckon-web/next-link';
import { TextLink } from '@reckon-web/text';
<TextLink as={NextLink} href="/">
A link
</TextLink>;
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo