Text

Utility to apply typography styles responsively based on the viewport size.

Import

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

Storybook

Text stories

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.

Design tokens


<View>
  <Text variant="title-1">Title 1</Text>
  <Text variant="title-2">Title 2</Text>
  <Text variant="title-3">Title 3</Text>
  <Text variant="title-4">Title 4</Text>
  <Text variant="title-5">Title 5</Text>
  <Text variant="title-6">Title 6</Text>
  <Text variant="featured-1">Featured 1</Text>
  <Text variant="featured-2">Featured 2</Text>
  <Text variant="featured-3">Featured 3</Text>
  <Text variant="body-1">Body 1</Text>
  <Text variant="body-2">Body 2</Text>
  <Text variant="body-3">Body 3</Text>
  <Text variant="caption-1">Caption 1</Text>
  <Text variant="caption-2">Caption 2</Text>
</View>

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

Colors

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


<View>
  <Text>Neutral</Text>
  <Text color="neutral-faded">Neutral faded</Text>
  <Text color="positive">Safe</Text>
  <Text color="critical">Danger</Text>
  <Text color="primary">Primary</Text>
  <Text color="disabled">Disabled</Text>
</View>

Weight

By default, all font tokens come with a default font-weight that can be customised through theming. When working with featured, body and caption fonts – you might still want to format the text, so you can use the weight property to change the default value.


<Text variant="body-2" weight="bold">
  Body 2 bold
</Text>

Formatting

Text can be truncated with the maxLines property:


<View width="200px">
  <Text variant="body-3" maxLines={2}>
    Reshaped is a professionally crafted design system for product design and
    development teams and individuals. We provide with core components you would
    need in every project, focusing on accessibility, scalable component
    customization and development experience.
  </Text>
</View>

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


<Text variant="body-2" decoration="line-through">
  $150
</Text>

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.

Contents

Usage
Colors
Weight
Formatting
Accessibility