Text

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

Alpha

This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

Use to create various levels of hierarchy on the page.

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

function TextExample() {
  return (
    <Stack 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>
    </Stack>
  );
}

Use to create a range of body text. These styles are primarily used within components and blocks of text.

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

function TextExample() {
  return (
    <Stack vertical>
      <Text variant="bodyLg" as="p">
        Shopify POS is the easiest way to sell your products in person.
        Available for iPad, iPhone, and Android.
      </Text>
      <Text variant="bodyMd" as="p">
        Shopify POS is the easiest way to sell your products in person.
        Available for iPad, iPhone, and Android.
      </Text>
      <Text variant="bodySm" as="p">
        Shopify POS is the easiest way to sell your products in person.
        Available for iPad, iPhone, and Android.
      </Text>
    </Stack>
  );
}

Use to set text alignment.

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

function TextExample() {
  return (
    <Stack vertical>
      <Text variant="bodyLg" as="p" alignment="start">
        Manage your Shopify store on-the-go with real-time notifications, access
        to your dashboard, and order management, all from your smartphone.
      </Text>
      <Text variant="bodyLg" as="p" alignment="center">
        Manage your Shopify store on-the-go with real-time notifications, access
        to your dashboard, and order management, all from your smartphone.
      </Text>
      <Text variant="bodyLg" as="p" alignment="end">
        Manage your Shopify store on-the-go with real-time notifications, access
        to your dashboard, and order management, all from your smartphone.
      </Text>
      <Text variant="bodyLg" as="p" alignment="justify">
        Manage your Shopify store on-the-go with real-time notifications, access
        to your dashboard, and order management, all from your smartphone.
      </Text>
    </Stack>
  );
}

Use to give text a range of font weights.

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

function TextExample() {
  return (
    <Stack vertical>
      <Text variant="bodyMd" as="p" fontWeight="bold">
        Sales this year
      </Text>
      <Text variant="bodyMd" as="p" fontWeight="semibold">
        Sales this year
      </Text>
      <Text variant="bodyMd" as="p" fontWeight="medium">
        Sales this year
      </Text>
      <Text variant="bodyMd" as="p" fontWeight="regular">
        Sales this year
      </Text>
    </Stack>
  );
}

Use to set text color.

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

function TextExample() {
  return (
    <Stack vertical>
      <Text variant="bodyMd" as="p" color="subdued">
        Use to de-emphasize a piece of text that is less important to merchants
        than other nearby text. May also be used to indicate when normal content
        is absent, for example, “No supplier listed”. Don’t use only for
        aesthetic effect.
      </Text>
      <Text variant="bodyMd" as="p" color="success">
        Use in combination with a symbol showing an increasing value to indicate
        an upward trend.
      </Text>
      <Text variant="bodyMd" as="p" color="warning">
        Use to denote something that needs attention, or that merchants need to
        take action on.
      </Text>
      <Text variant="bodyMd" as="p" color="critical">
        Use in combination with a symbol showing a decreasing value to indicate
        a downward trend.
      </Text>
    </Stack>
  );
}

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'

The element type.

childrenReactNode

Text to display.

color?'success' | 'critical' | 'warning' | 'subdued'

Adjust color of text.

fontWeight?'regular' | 'medium' | 'semibold' | 'bold'

Adjust weight of text.

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.

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 variant="bodyMd" as="span" color="subdued">No supplier listed</Text>

Strong

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

Positive

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

Negative

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

Warning

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

Code

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

VisuallyHidden

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