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.
| Name | Type | Default | Description | Required? |
|---|---|---|---|---|
fontSize | 100200300400500600700800900100011001200 | Maps to the typeScale system prop, sets font size and line height using Seeds values | ||
breakWord | boolean | Controls the CSS word-break property (optional) | ||
truncated | boolean | Truncates text into a singular line with ellipsis (optional) | ||
children | ReactNode | Content for component *required | ||
qa | Object | Customizable QA Object |
Recipes
Custom font size
Hello world!
Truncated text
Supercalifragilisticexpialidocious