Text

Component for Text

Anatomy

Import and assemble the component:

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

3<Text />

API Reference

According to the element rendered using as, Text will extend over the default HTML Attributes

Prop

Type

Examples

Variant

1<Flex gap="medium" 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

1<Flex gap="large" 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

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

Transform

1<Flex gap="large" 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

1<Flex gap="medium" 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

1<Flex
2  gap="medium"
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

1<Flex gap="large" 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>

Accessibility

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