Components

Text

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'

Properties

NameTypeDefaultDescriptionRequired?
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
breakWordboolean
Controls the CSS word-break property
truncatedboolean
Truncates text into a single line with ellipsis
childrenReact.Node
qaObject

Recipes

Custom font size
Hello world!
Truncated text
Supercalifragilisticexpialidocious