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 (optional)
truncatedboolean
Truncates text into a singular line with ellipsis (optional)
childrenReactNode
Content for component *required
qaObject
Customizable QA Object

Recipes

Custom font size
Hello world!
Truncated text
Supercalifragilisticexpialidocious