Text

Import
import { Text } from "reshaped";
import type { TextProps } from "reshaped";
Storybook

Automatically handles its font-size based on the viewport size

Supports inehriting color from its parent elements
Supports rendering as custom HTML tags


Usage

The Reshaped type scale includes various styles that support both expressive and application font sizes. Each style is represented by font size, line-height, font-weight, and font-family values. All these values come from the design tokens defined in the theme.

Note: It's better to read this part of documentation from desktop screens and try resizing the screen to see how typography behaves for every viewport size

Expressive typefaces

Display from 1 to 3 are the biggest typefaces. They are mainly used for marketing materials or landing pages, rather than applications UI. They can be paired together with subtitles of the same variant number.

Body typefaces

body-strong, body-medium, and body variants of the Text component are used for displaying long-form writing with the chosen font-weight. Each of them comes in ranges 1-2, which is related to the size of the typeface, where one is bigger than 2. Default typeface is body-2.

These smaller typefaces can also be used as subtitles for title 4-6 typefaces.

Colors

Text component comes with a color property that lets you use design token values.

Formatting

Text can be truncated with the maxLines property:

You can decorate Text with line-through by using the decoration property.

Accessibility

  • Text component can be rendered as any HTML tag using as property. This helps assign specific element roles to text elements, like rendering them as headings or paragraphs.
  • Colors used by the color property only pick values with foreground roles to achieve a 4.5:1 contrast ratio with backgrounds.