Skip to main content
The Text component is a versatile typography primitive that supports multiple variants, sizes, weights, and text styling options. It can render as different HTML elements while maintaining consistent styling.

​
Basic usage

import { Text } from '@raystack/apsara';

function Example() {
  return <Text>This is some text</Text>;
}

​
Props

​
variant
'primary' | 'secondary' | 'tertiary' | 'emphasis' | 'accent' | 'attention' | 'danger' | 'success'
default:"'primary'"
Visual style variant that conveys semantic meaning through color.
​
size
'micro' | 'mini' | 'small' | 'regular' | 'large' | 1-10
default:"'small'"
Text size. Use named sizes (‘micro’, ‘mini’, ‘small’, ‘regular’, ‘large’) for recommended options.
​
weight
'regular' | 'medium' | 'bold' | 'bolder' | 'normal' | 'lighter' | 100-900
default:"'regular'"
Font weight. Use ‘regular’ or ‘medium’ for recommended options.
​
transform
'capitalize' | 'uppercase' | 'lowercase'
Text transformation.
​
align
'center' | 'start' | 'end' | 'justify'
Text alignment.
​
lineClamp
1 | 2 | 3 | 4 | 5
Limit text to specified number of lines with ellipsis.
​
underline
boolean
Whether to underline the text.
​
strikeThrough
boolean
Whether to add strikethrough styling.
​
italic
boolean
Whether to italicize the text.
​
as
'span' | 'div' | 'p' | 'label' | 'a'
default:"'span'"
The HTML element to render.
​
className
string
Additional CSS classes to apply.
​
children
ReactNode
The text content.

​
Variants

Different semantic color styles for various use cases. 
import { Text } from '@raystack/apsara';

function TextVariants() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text variant="primary">Primary text</Text>
      <Text variant="secondary">Secondary text</Text>
      <Text variant="tertiary">Tertiary text</Text>
      <Text variant="emphasis">Emphasis text</Text>
      <Text variant="accent">Accent text</Text>
      <Text variant="attention">Attention text</Text>
      <Text variant="danger">Danger text</Text>
      <Text variant="success">Success text</Text>
    </div>
  );
}

​
Sizes

Use named sizes for consistent typography. 
import { Text } from '@raystack/apsara';

function TextSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text size="micro">Micro text</Text>
      <Text size="mini">Mini text</Text>
      <Text size="small">Small text (default)</Text>
      <Text size="regular">Regular text</Text>
      <Text size="large">Large text</Text>
    </div>
  );
}

​
Font weights

import { Text } from '@raystack/apsara';

function TextWeights() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text weight="regular">Regular weight (default)</Text>
      <Text weight="medium">Medium weight</Text>
      <Text weight="bold">Bold weight</Text>
      <Text weight={700}>Numeric weight (700)</Text>
    </div>
  );
}

​
Text transformations

import { Text } from '@raystack/apsara';

function TextTransforms() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text transform="capitalize">capitalize this text</Text>
      <Text transform="uppercase">uppercase this text</Text>
      <Text transform="lowercase">LOWERCASE THIS TEXT</Text>
    </div>
  );
}

​
Text alignment

import { Text } from '@raystack/apsara';

function TextAlignment() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text align="start" as="div">Start aligned</Text>
      <Text align="center" as="div">Center aligned</Text>
      <Text align="end" as="div">End aligned</Text>
      <Text align="justify" as="div">Justified text that spans multiple lines to show the justification effect.</Text>
    </div>
  );
}

​
Line clamping

Limit text to a specific number of lines with ellipsis. 
import { Text } from '@raystack/apsara';

function ClampedText() {
  return (
    <div style={{ maxWidth: '300px' }}>
      <Text lineClamp={2}>
        This is a long piece of text that will be clamped to two lines. 
        Any content beyond two lines will be hidden and replaced with an ellipsis.
      </Text>
    </div>
  );
}

​
Text styling

import { Text } from '@raystack/apsara';

function StyledText() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text underline>Underlined text</Text>
      <Text strikeThrough>Strikethrough text</Text>
      <Text italic>Italic text</Text>
      <Text weight="bold" underline>Bold and underlined</Text>
    </div>
  );
}

​
HTML elements

Render as different HTML elements while maintaining styling. 
import { Text } from '@raystack/apsara';

function DifferentElements() {
  return (
    <div>
      <Text as="span">Inline span (default)</Text>
      <Text as="div">Block div</Text>
      <Text as="p">Paragraph element</Text>
      <Text as="label" htmlFor="input-id">Label element</Text>
    </div>
  );
}

​
Status messages

import { Text } from '@raystack/apsara';

function StatusMessages() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Text variant="success" size="small">
        ✓ Your changes have been saved
      </Text>
      <Text variant="danger" size="small">
        ✗ An error occurred while processing your request
      </Text>
      <Text variant="attention" size="small">
        âš  This action cannot be undone
      </Text>
    </div>
  );
}

​
With other components

Text works well as a wrapper for inline components. 
import { Text, Amount } from '@raystack/apsara';

function ComposedText() {
  return (
    <Text size="regular" variant="emphasis">
      Total amount: <Amount value={1299} currency="USD" />
    </Text>
  );
}

​
Accessibility

  • Use semantic HTML elements via the as prop for proper document structure
  • Ensure sufficient color contrast between text and background
  • Use appropriate variant colors that convey semantic meaning
  • When using line clamping, consider providing a way to view the full text

​
Related components

  • Headline - For larger headings and titles
  • Link - Extends Text with link functionality
  • Amount - Inherits Text styling for monetary values
  • Label - For form field labels