Text

Importing

import { Text } from '@customerio/pluma-components/react';

Usage

Use the Text component when showing any sort of styled text in the application, when other typography components aren't suitable.

<Text>I am a default text component</Text>

Size

The size prop allows changing the font size:

<Text size="xl">I am an xl text component</Text>

Weight

The weight prop allows changing the font weight:

<Text weight="semibold">I am a semibold text component</Text>

Color

The color prop allows changing the text color:

<Text color="critical">I am a critical text component</Text>

Family

The family prop allows changing the font family:

<Text family="mono">I am a monospace text component</Text>

Text style

The component supports a text prop, which applies one of the predefined typographic styles:

• product-code
• product-h1
• product-h2
• product-h3
• product-h4
• product-label
• product-label-secondary
• product-link
• product-link-secondary
• product-p
• product-p-active
• product-p-secondary
• product-ps
• product-ps-active
• product-pxs
• product-pxs-active
• product-pxs-secondary

<Text text="product-h3">I am an h3-styled text component</Text>

Truncation

The truncate prop allows truncating the text with ellipsis:

<Box style={{ width: '200px' }}>
  <Text truncate>
	This is a long text that will be truncated with ellipsis
  </Text>
</Box>