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
Code

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

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>
  );
}

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.