Text

Text is a typography component for rendering text content with various styling options, including gradient text support.

Usage

<Text 
  color="primary"
  textVariant="body1"
>
  Regular text content
</Text>

With Gradient

<Text 
  gradient={{
    angle: "45deg",
    fromColor: "primary",
    toColor: "secondary",
    fromStop: "0%",
    toStop: "100%"
  }}
>
  Gradient text
</Text>

Line Clamping

<Text lines={2}>
  This text will be clamped to 2 lines with an ellipsis if it overflows...
</Text>

Props

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

• Color Props
• Layout Props
• Position Props
• Space Props
• Typography Props

Additional Props

Prop	Type	Description
gradient	object	Gradient configuration for text
lines	number	Number of lines before text truncation
textTransform	string	CSS text-transform property
textVariant	string	Theme text variant name