Text

<Text variant="title-3">Design system</Text>

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.

<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>

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">Positive</Text>
  <Text color="warning">Warning</Text>
  <Text color="critical">Critical</Text>
  <Text color="primary">Primary</Text>
  <Text color="disabled">Disabled</Text>
</View>

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

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

You can automatically balance the way text is split into multiple lines with the balance wrap:

<Text wrap="balance">
  Reshaped is a professionally crafted design system for product design and
  development teams and individuals.
</Text>

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 using the decoration property.

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

Text supports responsive syntax for the variant property. Use object syntax to control their values based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<Text variant={{ s: "body-2", l: "body-1" }} />