Text API

Import

import { Text } from '@cimpress-ui/react';

Style inheritance

Text rendered within other text will inherit its parent’s style.

The example below renders multiple levels of nested Text components. Notice how each nested text has the same style as its parent, even though it’s not specified in the markup.

Preview

This is a single paragraph of text. But it can contain many different styles within it.

Code

import { Text } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Text as="p" variant="body" tone="base">
      This is a single paragraph of text. But it can contain{' '}
      <Text as="span" tone="info">
        many{' '}
        <Text as="span" fontStyle="italic">
          different{' '}
          <Text as="span" variant="body-semibold">
            styles
          </Text>
        </Text>
      </Text>{' '}
      within it.
    </Text>
  );
}

Copy code Open in playground

API reference

Text

Renders the provided text contents in a specified style.

See typography guide.

ref

Ref<ElementRef<T>>

The ref type for this component.

TextProps<T extends TextElement>

as *

T

The HTML element to render as.

children *

ReactNode

Text to display. Allows nesting other typography components.

id

string

The element's unique identifier. See MDN.

data-cim-style-root

boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className

string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style

CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

aria-label

string

Defines a string value that labels the current element.

aria-labelledby

string

Identifies the element (or elements) that labels the current element.

aria-describedby

string

Identifies the element (or elements) that describes the object.

aria-details

string

Identifies the element (or elements) that provide a detailed, extended description for the object.

variant

'small' | 'medium' | 'title-1' | 'title-2' | 'title-3' | 'title-4' | 'title-5' | 'title-6' | 'body' | 'body-semibold' | 'medium-semibold' | 'small-semibold'

Determines the visual variant of text.

fontStyle

'normal' | 'italic'

Whether the font should be styled with a normal or italic face.

alignment

'center' | 'end' | 'start' | 'justify'

Horizontal alignment of text.

textDecoration

'none' | 'underline' | 'strikethrough'

The kind of decorative line applied to the text.

tone

ForegroundTone

Determines the color tone of the text.

StyleProps

margin

Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX

Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY

Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop

Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight

Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom

Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft

Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.