Text

Components

Code

This component is used to render text in a variety of styles based on Seeds values.

By default, the Text component renders text in a span tag. You can change this with the “as” prop. In addition, Text will inherit its font size from its parent unless a size is set with the fontSize prop.

Hello world!

import { Text } from '@sproutsocial/racine'

<Text>
  Hello world!
</Text>

<Text>
  Hello world!
</Text>

Properties

Name	Type	Description
`fontSize`	`100` `200` `300` `400` `500` `600` `700` `800` `900` `1000` `1100` `1200`	Maps to the typeScale system prop, sets font size and line height using Seeds values
`breakWord`	`boolean`	Controls the CSS word-break property
`truncated`	`boolean`	Truncates text into a single line with ellipsis
`children`	`React.Node`
`qa`	`Object`

Recipes

Custom font size

Hello world!

<Text fontSize={600}>
  Hello world!
</Text>

<Text fontSize={600}>
  Hello world!
</Text>

Truncated text

Supercalifragilisticexpialidocious

<Text truncated fontSize={900}>
  Supercalifragilisticexpialidocious
</Text>

<Text truncated fontSize={900}>
  Supercalifragilisticexpialidocious
</Text>