Apsara

Documentation

Playground

Icons

TextnewNEW

Component for Text

Usage

import { Text } from '@raystack/apsara/v1'
 
<Text size="1">This is a test</Text>
<Text size="2">This is a test</Text>

Text Props

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

PropTypeDefault
as
"span" | "p" | "div" | "label" | "a"
"span"
variant
"primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success"
"primary"
size
"micro" | "mini" | "small" | "regular" | "large"
"regular"
weight
"regular" | "medium"
"regular"
transform
"capitalize" | "uppercase" | "lowercase"
-
align
"center" | "start" | "end" | "justify"
-
lineClamp
1 | 2 | 3 | 4 | 5
-
underline
boolean
-
strikeThrough
boolean
-
italic
boolean
-
className
string
-

Examples

Variant

<Flex gap="medium" align="center">
  <Text variant="primary">primary</Text>
  <Text variant="secondary">secondary</Text>
  <Text variant="tertiary">tertiary</Text>
  <div
    style={{
      backgroundColor: "var(--rs-color-background-neutral-tertiary)",
      padding: "var(--rs-space-3)",
    }}
  >
    <Text variant="emphasis">emphasis</Text>
  </div>
  <Text variant="accent">accent</Text>
  <Text variant="attention">attention</Text>
  <Text variant="danger">danger</Text>
  <Text variant="success">success</Text>
</Flex>

Size

<Flex gap="large" align="center">
  <Text size="micro">This is a text</Text>
  <Text size="mini">This is a text</Text>
  <Text size="small">This is a text</Text>
  <Text size="regular">This is a text</Text>
  <Text size="large">This is a text</Text>
</Flex>

Weight

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

Transform

<Flex gap="large" align="center">
  <Text transform="capitalize">This is a text</Text>
  <Text transform="uppercase">This is a text</Text>
  <Text transform="lowercase">This is a text</Text>
</Flex>

Line Clamp

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

Align

<Flex
  gap="medium"
  align="center"
  direction="column"
  style={{ width: "100%", maxWidth: 400, alignItems: "stretch" }}
>
  <Text align="start">This is a text</Text>
  <Text align="center">This is a text</Text>
  <Text align="end">This is a text</Text>
  <Text align="justify">This is a text</Text>
</Flex>

Style

<Flex gap="large" align="center">
  <Text italic>This is a text</Text>
  <Text strikeThrough>This is a text</Text>
  <Text underline>This is a text</Text>
  <Text italic strikeThrough underline>
    This is a text
  </Text>
</Flex>

Previous

Tabs

Next

TextArea

On this page