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
<Text as="ul" className="list-square pl-5">...</Text>
<Text as="ol" className="list-decimal pl-5 mt-4">...</Text>

Custom unordered list

  • Primary item
  • Parent item
    • Nested item 1
    • Nested item 2
<UnorderedList
  icon={<SquareFill />}
  iconColor="text-pink-500"
  items={[
    "Primary item",
    {
      content: "Parent item",
      children: ["Nested item 1", "Nested item 2"],
    },
  ]}
/>

List with links

You can also pass links as items within the UnorderedList component.
<UnorderedList
icon={<SquareFill />}
iconColor="text-blue-500"
items={[
  {
    content: (
      <Link href="/docs/Getting_Started/React/" icon={<ArrowRight />} iconPosition="after">
        React documentation
      </Link>
    ),
  },
  {
    content: (
      <Link href="https://github.com/talkjs/talkjs-react" icon={<ArrowRight />} iconPosition="after">
        Open-source React components
      </Link>
    ),
  },
  {
    content: (
      <Link href="/docs/Reference/REST_API/Getting_Started/Introduction/" icon={<ArrowRight />} iconPosition="after">
        REST API
      </Link>
    ),
  },
  {
    content: (
      <Link href="/docs/Reference/Webhooks/" icon={<ArrowRight />} iconPosition="after">
        Webhooks
      </Link>
    ),
  },
]}
/>

Usage

The Text component can be referenced using the following format:

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