Text

Typography helps establish hierarchy and communicate important content by creating clear visual patterns.

Beta

This component is ready for wider adoption, usage is encouraged for most cases. Breaking changes are possible in minor version updates. To learn more please read about our component lifecycles

Use to create various levels of hierarchy on the page.

import {Text, LegacyStack} from '@shopify/polaris';
import React from 'react';

function TextExample() {
  return (
    <LegacyStack vertical>
      <Text variant="heading4xl" as="h1">
        Online store dashboard
      </Text>
      <Text variant="heading3xl" as="h2">
        Online store dashboard
      </Text>
      <Text variant="heading2xl" as="h3">
        Online store dashboard
      </Text>
      <Text variant="headingXl" as="h4">
        Online store dashboard
      </Text>
      <Text variant="headingLg" as="h5">
        Online store dashboard
      </Text>
      <Text variant="headingMd" as="h6">
        Online store dashboard
      </Text>
      <Text variant="headingSm" as="h6">
        Online store dashboard
      </Text>
      <Text variant="headingXs" as="h6">
        Online store dashboard
      </Text>
    </LegacyStack>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface TextProps

alignment?'start' | 'center' | 'end' | 'justify': Adjust horizontal alignment of text.
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend': The element type.
breakWord?boolean: Prevent text from overflowing.
childrenReactNode: Text to display.
color?'success' | 'critical' | 'warning' | 'subdued' | 'text-inverse': Adjust color of text.
fontWeight?'regular' | 'medium' | 'semibold' | 'bold': Adjust weight of text.
id?string: HTML id attribute.
numeric?boolean: Use a numeric font variant with monospace appearance.
truncate?boolean: Truncate text overflow with ellipsis.
variant?'headingXs' | 'headingSm' | 'headingMd' | 'headingLg' | 'headingXl' | 'heading2xl' | 'heading3xl' | 'heading4xl' | 'bodySm' | 'bodyMd' | 'bodyLg': Typographic style of text.
visuallyHidden?boolean: Visually hide the text.

Variant tokens

Each variant uses a predetermined combination of the font tokens to set the font size and line height. Heading variants have a set font weight but can be overridden by using the fontWeight prop. Nested Text components will inherit properties from its parent Text container.

Variant	Font size token	px value	rem value	Font line height token	Font weight token	Reponsive
`heading4Xl`	`--p-font-size-700`	40	2.5	`--p-line-height-7`	`--p-font-weight-bold`	Yes
`heading3Xl`	`--p-font-size-600`	32	2	`--p-line-height-6`	`--p-font-weight-semibold`	Yes
`heading2Xl`	`--p-font-size-500`	28	1.75	`--p-line-height-5`	`--p-font-weight-semibold`	Yes
`headingXl`	`--p-font-size-400`	24	1.5	`--p-line-height-4`	`--p-font-weight-semibold`	Yes
`headingLg`	`--p-font-size-300`	20	1.25	`--p-line-height-3`	`--p-font-weight-semibold`	Yes
`headingMd`	`--p-font-size-200`	16	1	`--p-line-height-3`	`--p-font-weight-semibold`	No
`headingSm`	`--p-font-size-100`	14	0.875	`--p-line-height-2`	`--p-font-weight-semibold`	No
`headingXs`	`--p-font-size-75`	12	0.75	`--p-line-height-1`	`--p-font-weight-semibold`	No
`bodyLg`	`--p-font-size-200`	16	1	`--p-line-height-2`	`--p-font-weight-regular`	No
`bodyMd`	`--p-font-size-100`	14	0.875	`--p-line-height-2`	`--p-font-weight-regular`	No
`bodySm`	`--p-font-size-75`	12	0.75	`--p-line-height-1`	`--p-font-weight-regular`	No

Mapping from previous type components

These are suggested replacements for existing text style components, but ultimately the best replacement should be evaluated based on the context of the usage. The Text component also requires setting the semantically appropriate html element through the as prop.

DisplayText

Small

Example
- <DisplayText size="small">Sales this year</DisplayText>
+ <Text variant="headingLg" as="p">Sales this year</Text>

Medium

Example
- <DisplayText size="medium">Sales this year</DisplayText>
+ <Text variant="headingXl" as="p">Sales this year</Text>

Large

Example
- <DisplayText size="large">Sales this year</DisplayText>
+ <Text variant="heading2xl" as="p">Sales this year</Text>

Extra large

Example
- <DisplayText size="extraLarge">Sales this year</DisplayText>
+ <Text variant="heading4xl" as="p">Sales this year</Text>

Heading

Example
- <Heading>Online store dashboard</Heading>
+ <Text variant="headingMd" as="h2">Online store dashboard</Text>

Subheading

Example
- <Subheading>Accounts</Subheading>
+ <Text variant="headingXs" as="h3">Accounts</Text>

Caption

Example
- <Caption>Received April 21, 2017</Caption>
+ <Text variant="bodySm" as="p">Received April 21, 2017</Text>

TextStyle

Subdued

Example
- <TextStyle variation="subdued">No supplier listed</TextStyle>
+ <Text as="span" color="subdued">No supplier listed</Text>

Strong

Example
- <TextStyle variation="strong">No supplier listed</TextStyle>
+ <Text as="span" fontWeight="semibold" >No supplier listed</Text>

Positive

Example
- <TextStyle variation="positive">No supplier listed</TextStyle>
+ <Text as="span" color="success">No supplier listed</Text>

Negative

Example
- <TextStyle variation="negative">No supplier listed</TextStyle>
+ <Text as="span" color="critical">No supplier listed</Text>

Warning

Example
- <TextStyle variation="warning">No supplier listed</TextStyle>
+ <Text as="span" color="warning">No supplier listed</Text>

Code

Example
- <TextStyle variation="code">No supplier listed</TextStyle>
+ <Text as="span"><InlineCode>No supplier listed</InlineCode></Text>

Example
- <VisuallyHidden>
-   <Heading>Title and description</Heading>
- </VisuallyHidden>
+ <Text visuallyHidden as="h2">Title and description</Text>

Best practices

Headings

Headings use all the variants with heading in the name, such as headingMd. Headings should:

Clearly describe the section of interface they refer to
Highlight the most important concept or piece of information merchants need to know
Sit at the top of the section of interface they’re referring to

Captions

Captions use the bodySm Text variant.

Use for secondary labels in graphs and charts
May be used for timestamps in lists of content
Don’t use this variant for other cases
Don’t use this variant for text longer than a few words
Don’t use this variant for aesthetic effect or to break from the standard text size

Text styles

Text styles should be:

Used when enhancing the text to help merchants understand its meaning
Subdued if the text is less important than its surrounding text
Warning if the text denotes something that needs attention, or that merchants need to take action on.
Semibold for input fields, or for a row total in a price table
Paired with symbols, like an arrow or dollar sign, when using success or critical styles

Visually hidden text should:

Not be used if semantic markup can make content understandable to people using assistive technology
Be used to provide extra context when semantic markup isn’t enough
Be used on any content that is normally present but is being omitted
Make sense in context when used with a screen reader