Apsara

Documentation

Playground

Icons

Text

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

PropTypeDefault
variant
"primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success"
"primary"
size
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
2
weight
"bold" | "bolder" | "normal" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
400
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="1">This is a text</Text>
  <Text size="2">This is a text</Text>
  <Text size="3">This is a text</Text>
  <Text size="4">This is a text</Text>
  <Text size="5">This is a text</Text>
</Flex>

Weight

<Flex gap="small" align="center" direction="column">
  <Text weight="100">This is a text</Text>
  <Text weight="200">This is a text</Text>
  <Text weight="300">This is a text</Text>
  <Text weight="400">This is a text</Text>
  <Text weight="500">This is a text</Text>
  <Text weight="600">This is a text</Text>
  <Text weight="700">This is a text</Text>
  <Text weight="800">This is a text</Text>
  <Text weight="900">This is a text</Text>
</Flex>

Previous

Tabs

Next

TextArea

On this page