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.