Skip to main content

Text

Text is a fundamental component for displaying text content with extensive typography controls.

Usage​

<Text 
  color="primary-500"
  fontSize="lg"
  fontWeight="bold"
>
  Hello World
</Text>

With Ellipsis​

<Text 
  numberOfLines={2}
  ellipsizeMode="tail"
>
  This is a very long text that will be truncated after two lines with an ellipsis at the end...
</Text>

Props​

Text accepts all styled-system props from the following categories:

  • Border Props
    • border, borderRadius, etc.
  • Layout Props
    • width, height, display, etc.
  • Background Props
    • background, backgroundColor
  • Color Props
    • color, textColor
  • Typography Props
    • fontSize, fontWeight, lineHeight
    • textAlign, fontStyle, letterSpacing
  • Space Props
    • margin, padding and their variants

Specific Props​

numberOfLines​

Type: number

Maximum number of lines to display before truncating.

ellipsizeMode​

Type: 'head' | 'middle' | 'tail' | 'clip' Default: 'tail'

Determines how text should be truncated:

  • head: Beginning of text
  • middle: Middle of text
  • tail: End of text
  • clip: Clips at exact character