Text

A typography primitive for rendering text with consistent size, weight, color, and alignment across the interface.

Anatomy

Import and assemble the component:

1import { Text } from '@raystack/apsara'
2

3<Text />

Usage

Text maps the typography tokens onto props, so body copy stays on the scale without reaching for CSS.

Variant

Seven semantic colors. primary is the default; drop to secondary or tertiary for supporting text, and use success, danger, warning or accent to carry meaning.

1<Flex gap={5} align="center">
2  <Text variant="primary">primary</Text>
3  <Text variant="secondary">secondary</Text>
4  <Text variant="tertiary">tertiary</Text>
5  <div
6    style={{
7      backgroundColor: "var(--rs-color-background-neutral-tertiary)",
8      padding: "var(--rs-space-3)",
9    }}
10  >
11    <Text variant="emphasis">emphasis</Text>
12  </div>
13  <Text variant="accent">accent</Text>
14  <Text variant="attention">attention</Text>
15  <Text variant="danger">danger</Text>

Size

Five steps from micro to large. regular is the default and matches body copy.

1<Flex gap={9} align="center">
2  <Text size="micro">This is a text</Text>
3  <Text size="mini">This is a text</Text>
4  <Text size="small">This is a text</Text>
5  <Text size="regular">This is a text</Text>
6  <Text size="large">This is a text</Text>
7</Flex>

Weight

Two weights. regular is the default; medium lifts a line without making it a heading.

1<Flex gap={9} align="center">
2  <Text weight="regular">This is a text</Text>
3  <Text weight="medium">This is a text</Text>
4</Flex>

Transform

capitalize, uppercase, or lowercase, applied in CSS so the underlying text stays intact for copy and search.

1<Flex gap={9} align="center">
2  <Text transform="capitalize">This is a text</Text>
3  <Text transform="uppercase">This is a text</Text>
4  <Text transform="lowercase">This is a text</Text>
5</Flex>

Line clamp

lineClamp truncates to a set number of lines (1–5) with an ellipsis. The text still exists in the DOM, so it stays selectable and searchable.

1<Flex gap={5} align="center" direction="column">
2  <Text lineClamp={1}>
3    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat
4    mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor
5    labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur
6    fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud
7    eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor
8    magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim
9    sit consectetur enim.
10  </Text>
11  <Text lineClamp={2}>
12    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat
13    mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor
14    labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur
15    fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud

Align

start (the default), center, end, or justify. These are logical values, so they follow text direction rather than physical left and right.

1<Flex
2  gap={5}
3  align="center"
4  direction="column"
5  style={{ width: "100%", maxWidth: 400, alignItems: "stretch" }}
6>
7  <Text align="start">This is a text</Text>
8  <Text align="center">This is a text</Text>
9  <Text align="end">This is a text</Text>
10  <Text align="justify">This is a text</Text>
11</Flex>

Style

underline, strikeThrough, and italic are independent booleans, so they combine.

1<Flex gap={9} align="center">
2  <Text italic>This is a text</Text>
3  <Text strikeThrough>This is a text</Text>
4  <Text underline>This is a text</Text>
5  <Text italic strikeThrough underline>
6    This is a text
7  </Text>
8</Flex>

API Reference

Use the render prop to change the rendered element or provide a custom render function.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
textThe text element (<span> by default, or the element supplied via render)

Accessibility

  • Uses semantic HTML elements for proper content structure
  • Supports appropriate ARIA attributes for screen readers