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>