Typography: Text

Description

The Text component implements the typography elements such as headings, paragraphs, etc.

<Text.Headline>

Wraps the given text in the given HTML header size.

Usage

import Text from '@commercetools-uikit/text';

<Text.Headline as="h1">{'The title'}</Text.Headline>;

Properties

| Props | Type | Required | Values | Default | Description | | ------------- | ---------------- | :------: | ----------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------- | | as | String | ✅ | ['h1', 'h2', 'h3'] | - | - | | children | PropTypes.node | ✅ (*) | - | - | - | | intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage | | id | String | - | - | - | Used as HTML id property | | title | String | - | - | - | Text to show in a tooltip on hover over the element | | truncate | Bool | - | - | false | Option for truncate content in case the screen has small width | | nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. | | tone | String | - | ['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative'] | - | |

*: children is required only if intlMessage is not provided

The component further forwards all data- attributes to the underlying component.

Where to use

Title of pages.

<Text.Subheadline>

Wraps the given text in the given HTML header size.

Usage

import Text from '@commercetools-uikit/text';

<Text.Subheadline as="h4">{'The subtitle'}</Text.Subheadline>;

Properties

| Props | Type | Required | Values | Default | | | ------------- | ---------------- | :------: | ----------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------- | | as | String | ✅ | ['h4', 'h5'] | - | | | id | String | - | - | - | Used as HTML id property | | isBold | Boolean | - | - | false | | | tone | String | - | ['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative'] | - | | | children | PropTypes.node | ✅ (*) | - | - | | | intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage | | title | String | - | - | - | | | truncate | Bool | - | - | false | | | nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. |

*: children is required only if intlMessage is not provided

The component further forwards all data- attributes to the underlying component.

Where to use

Subtitle of pages.

<Text.Wrap>

Wraps the given text in its container. And for long text, text will be wrapped to new line.

Usage

import Text from '@commercetools-uikit/text';

<Text.Wrap>{'Sooo long text'}</Text.Wrap>;

Where to use

When we render value that may be vey long, and we prefer to wrap text to new line after it exceeds its wrapper's width.

<Text.Body>

Wraps the given text in a <p> element, for normal content.

Usage

import Text from '@commercetools-uikit/text';

<Text.Body>{'This is a content'}</Text.Body>;

Properties

| Props | Type | Required | Values | Default | | | ----------------- | ---------------- | :------: | ------------------------------------------------------------------------------------------ | --------- | ----------------------------------------------------------------------------------------- | | as | String | - | ['p', 'span'] | - | | | id | String | - | - | - | Used as HTML id property | | isBold | Boolean | - | - | false | This prop is being deprecated in favor of the fontWeight prop | | fontWeight | String | - | ['regular', 'medium', 'bold'] | regular | | | isItalic | Boolean | - | - | false | | | isStrikethrough | Boolean | - | - | false | | | tone | String | - | ['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative', 'inverted'] | - | | | children | PropTypes.node | ✅ (*) | - | - | | | intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage | | title | String | - | - | - | | | truncate | Bool | - | - | false | | | nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. |

*: children is required only if intlMessage is not provided

The component further forwards all data- attributes to the underlying component.

Where to use

Content text in general.

<Text.Detail>

Wraps the given text in a <small> semantic tag. It accepts a tone prop to properly style the text.

Usage

import Text from '@commercetools-uikit/text';

<Text.Detail>{'This would be something small'}</Text.Detail>
<Text.Detail tone="secondary">{'This would be something small with the secondary tone applied'}</Text.Detail>

Properties

| Props | Type | Required | Values | Default | | | ----------------- | ---------------- | :------: | ------------------------------------------------------------------------------------------ | --------- | ----------------------------------------------------------------------------------------- | | as | string | - | ['small', 'span'] [^] | false | | | id | String | - | - | - | Used as HTML id property | | isBold | Boolean | - | - | false | This prop is being deprecated in favor of the fontWeight prop | | fontWeight | String | - | ['regular', 'medium', 'bold'] | regular | | | isItalic | Boolean | - | - | false | | | isStrikethrough | Boolean | - | - | false | | | tone | String | - | ['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative', 'warning''] | - | | | children | PropTypes.node | ✅ (*) | - | - | | | intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage | | title | String | - | - | - | | | truncate | Bool | - | - | false | | | aria-labelledby | String | - | - | - | HTML ID of an element containing the label for the text rendered in this component | | nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. |

*: children is required only if intlMessage is not provided. [^]: Use as prop to render an inline element.

The component further forwards all data- attributes to the underlying component.

Where to use

Details text of form boxes.

<Text.Caption>

Wraps the text in the smallest available font size and accepts tone and fontWeight props.

Usage

import Text from '@commercetools-uikit/text';

<Text.Caption as="h4">{'The caption'}</Text.Caption>;

Properties

| Props | Type | Required | Values | Default | Description | | ----------------- | ---------------- | :------: | ------------------------------------------------------------------------------------------------------------------------ | --------- | ----------------------------------------------------------------------------------------- | | id | String | - | - | - | Used as HTML id property | | isItalic | Boolean | - | - | false | | | isStrikethrough | Boolean | - | - | false | | | tone | String | - | ['primary', 'secondary','tertiary', 'information', 'positive','negative', 'critical', 'inherit','warning','inverted'] | | | | fontWeight | String | - | ['regular', 'medium', 'bold'] | regular | | | truncate | Bool | - | - | false | Option for truncate content in case the screen has small width | | nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. | | aria-labelledby | String | - | - | - | HTML ID of an element containing the label for the text rendered in this component | | title | String | - | - | - | Text to show in a tooltip on hover over the element | | children | PropTypes.node | ✅ (*) | - | - | - | | intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |

*: children is required only if intlMessage is not provided

Where to use

Text.Caption is the smallest available font size in our design system. From the visual hierarchy perspective, it sits on the last spot of the importance scale and therefor should be used sparingly only in specific situations:

• The text does not have high importance and is not crucial to complete a task.
• In an information dense UI where using a bigger font size would harm the visual hierarchy of the page.
• For small descriptive labels, or tooltips, that provide helpful additional information in a given context.
• Text.Caption should not be used in text paragraphs longer than 1-2 sentences.