Text

Base text component for applying typographic styles.

Importing

The component can be imported via:

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.

Loading editor

Size

The size prop allows changing the font size:

Loading editor

Weight

The weight prop allows changing the font weight:

Loading editor

Color

The color prop allows changing the text color:

Loading editor

Family

The family prop allows changing the font family:

Loading editor

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

Loading editor

Truncation

The truncate prop allows truncating the text with ellipsis:

Loading editor

API

`PlumaText` `extends Box`

`color` `"critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined`

The text color. _{^{(See text color tokens)}}

`family` `"mono" | "sans" | undefined`

The font family. _{^{(See font family tokens)}}

`fontStyle` `"normal" | "italic" | undefined`

The font style. _{^{(See MDN font-style)}}

`size` `"m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined`

The text size. _{^{(See font size tokens)}}

`text` `"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" | undefined`

A predefined typography style. _{^{(See text tokens)}}

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

The font weight. _{^{(See font weight tokens)}}

Text

PlumaText extends Box

color "critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined

family "mono" | "sans" | undefined

fontStyle "normal" | "italic" | undefined

size "m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined

weight "bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined

On this page

`PlumaText` `extends Box`

`color` `"critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined`

`family` `"mono" | "sans" | undefined`

`fontStyle` `"normal" | "italic" | undefined`

`size` `"m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined`

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`