Skip to main content

​
Text

The Text component renders styled text with support for colors, sizes, weights, alignment, and advanced typography controls.

​
Props

PropTypeDefaultDescription
valuestring-Text content to display
childrenstring-Alternative to value
sizestring | number"md"Font size: xs, sm, md, lg, xl, 2xl, or number
weightstring"regular"Font weight: regular, medium, semibold, bold
colorstring"primary"Text color (see Color Values below)
alignstring"left"Text alignment: left, center, right
italicbooleanfalseItalic text
underlinebooleanfalseUnderline text
strikethroughbooleanfalseStrikethrough text
linesnumber-Max lines before truncation with ellipsis
lineHeightnumber-Line height (multiplier or absolute value)
letterSpacingnumber-Letter spacing in pixels
transformstring"none"Text transform: none, uppercase, lowercase, capitalize
widthstring | number-Fixed width
flexnumber-Flex grow factor

​
Size Presets

  • "xs" - 11px
  • "sm" - 13px
  • "md" - 15px (default)
  • "lg" - 17px
  • "xl" - 20px
  • "2xl" - 24px

​
Color Values

  • Semantic colors: primary, secondary, tertiary, muted, default
  • Status colors: action, success, warning, error
  • Absolute colors: white, black
  • Alpha transparency: alpha-XX (e.g., alpha-50 for 50% opacity white)
  • Custom colors: Any hex color (e.g., #8B5CF6)

​
Examples

​
Basic Text

<Text value="Hello, World!" />

​
Sizes

<Col gap="sm">
  <Text value="Extra Small" size="xs" />
  <Text value="Small" size="sm" />
  <Text value="Medium" size="md" />
  <Text value="Large" size="lg" />
  <Text value="Extra Large" size="xl" />
  <Text value="2X Large" size="2xl" />
</Col>

​
Weights

<Col gap="sm">
  <Text value="Regular weight" weight="regular" />
  <Text value="Medium weight" weight="medium" />
  <Text value="Semibold weight" weight="semibold" />
  <Text value="Bold weight" weight="bold" />
</Col>

​
Colors

<Col gap="sm">
  <Text value="Primary color" color="primary" />
  <Text value="Muted color" color="muted" />
  <Text value="Success color" color="success" />
  <Text value="Error color" color="error" />
  <Text value="Custom color" color="#8B5CF6" />
</Col>

​
Text Decoration

<Col gap="sm">
  <Text value="Italic text" italic />
  <Text value="Underlined text" underline />
  <Text value="Strikethrough text" strikethrough />
  <Text value="Combined styles" italic underline />
</Col>

​
Text Transform

<Col gap="sm">
  <Text value="uppercase text" transform="uppercase" />
  <Text value="LOWERCASE TEXT" transform="lowercase" />
  <Text value="capitalize each word" transform="capitalize" />
</Col>

​
Line Height and Spacing

<Col gap="md">
  {/* Line height as multiplier */}
  <Text
    value="This is text with 1.5x line height for better readability in paragraphs."
    lineHeight={1.5}
  />

  {/* Letter spacing */}
  <Text
    value="SPACED OUT TEXT"
    letterSpacing={2}
    weight="semibold"
  />
</Col>

​
Truncation

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

​
Alignment

<Col gap="sm">
  <Text value="Left aligned" align="left" />
  <Text value="Center aligned" align="center" />
  <Text value="Right aligned" align="right" />
</Col>

​
Semi-transparent Text

<Box background="primary" padding="md">
  <Text value="50% opacity" color="alpha-50" />
  <Text value="70% opacity" color="alpha-70" />
</Box>

​
Common Patterns

​
Label-Value Pair

<Row gap="sm">
  <Text value="Name:" weight="semibold" />
  <Text value={userName} flex={1} />
</Row>

​
Description Text

<Text
  value="This is a longer description that provides context about the feature."
  color="muted"
  size="sm"
  lineHeight={1.5}
/>

​
Price Display

<Row gap="xs" align="baseline">
  <Text value="$99" size="xl" weight="bold" />
  <Text value=".99" size="md" weight="bold" />
  <Text value="/month" size="sm" color="muted" />
</Row>

​
Status Message

<Row gap="xs" align="center">
  <Icon name="check-circle" color="success" size="sm" />
  <Text value="Payment successful" color="success" weight="medium" />
</Row>

​
Error Message

<Text
  value="Please enter a valid email address"
  color="error"
  size="sm"
/>