Text

The Text component is used for typography across TalkJS products, supporting various sizes, colors, alignments, and modifiers.

Sizes

Text supports different sizes for various use cases.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a paragraph
This is small text
<Text as="p">This is a paragraph</Text>
<Text as="span" size="sm">This is small text</Text>

Colors

You can customize the text color.
Gray 900
Gray 600
Pink 600
<Text color="text-gray-900">Gray 900</Text>
<Text color="text-gray-600">Gray 600</Text>
<Text color="text-pink-600">Pink 600</Text>

Modifiers

Text can be italic, underlined, or have different font weights.
This is italic text
This is underlined text
This is bold text
<Text italic>This is italic text</Text>
<Text underline>This is underlined text</Text>
<Text weight="bold">This is bold text</Text>

Monospace

You can apply a monospace font style.
This is monospace text
<Text monospace>This is monospace text</Text>

Truncate

Text can be truncated with an ellipsis if it exceeds the container width.
This is a long text that should be truncated
<Text truncate>This is a long text that should be truncated</Text>

Clamp

Clamp allows limiting the number of lines displayed.

This is a multi-line text example that should be clamped after two lines. If the text exceeds two lines, an ellipsis will appear.

<Text clamp={2}>This is a multi-line text example that should be clamped after two lines.</Text>

Alignment

Text can be aligned to the left, center, or right.
Left aligned
Center aligned
Right aligned
<Text align="left">Left aligned</Text>
<Text align="center">Center aligned</Text>
<Text align="right">Right aligned</Text>

Lists

You can render ordered or unordered lists using the as prop.
  • Item one
  • Item two
  • Item three
  1. First step
  2. Second step
  3. Third step

Custom unordered list

  • Primary item
  • Parent item
    • Nested item 1
    • Nested item 2

Usage

The Text component can be referenced using the following format:

import Text from "../../components/Text";