Text style

Text style enhances text with additional visual meaning. For example, using subdued text to de-emphasize it from its surrounding text.

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.

import {TextStyle} from '@shopify/polaris';
import React from 'react';

function TextStyleExample() {
  return <TextStyle variation="subdued">No supplier listed</TextStyle>;
}

Use to mark text representing user input, or to emphasize the totals row in a price table.

import {TextStyle} from '@shopify/polaris';
import React from 'react';

function TextStyleExample() {
  return <TextStyle variation="strong">Total</TextStyle>;
}

Use in combination with a symbol showing an increasing value to indicate an upward trend.

import {TextStyle} from '@shopify/polaris';
import React from 'react';

function TextStyleExample() {
  return <TextStyle variation="positive">Orders increased</TextStyle>;
}

Use in combination with a symbol showing a decreasing value to indicate a downward trend.

import {TextStyle} from '@shopify/polaris';
import React from 'react';

function TextStyleExample() {
  return <TextStyle variation="negative">Orders decreased</TextStyle>;
}

Use to denote something that needs attention, or that merchants need to take action on.

import {TextStyle} from '@shopify/polaris';
import React from 'react';

function TextStyleExample() {
  return <TextStyle variation="warning">Scheduled maintenance</TextStyle>;
}

Use to display inline snippets of code or code-like text.

import {TextStyle} from '@shopify/polaris';
import React from 'react';

function TextStyleExample() {
  return (
    <p>
      New URL that visitors should be forwarded to. If you want your store’s
      homepage, enter <TextStyle variation="code"> / </TextStyle> (a forward
      slash).
    </p>
  );
}

Props

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

interface TextStyleProps
variation?'positive' | 'negative' | 'warning' | 'strong' | 'subdued' | 'code'

Give text additional visual meaning.

children?React.ReactNode

The content that should get the intended styling.

Best practices

Text style 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.
  • Strong for input fields, or for a row total in a price table
  • Paired with symbols, like an arrow or dollar sign, when using positive or negative styles

Accessibility

Don’t rely on text style alone to convey information to merchants. Ensure that text styles are used to enhance the information provided in text.

Do

Example
<TextStyle variation="positive">Orders increased</TextStyle>

Don’t

Example
<TextStyle variation="positive">Orders</TextStyle>