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

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
TYPOGRAPHY
Learn more
NameTypeDefaultDescriptionRequired?
fontSize100200300400500600700800900100011001200
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