Text

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

Beta

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

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.
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>

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