Text style

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

Examples

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.

Drag to resize example

Props

children
React.ReactNode
The content that should get the intended styling
variation
"positive" | "negative" | "strong" | "subdued" | "code"
Give text additional visual meaning

Subdued text style

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.

Subdued textstyle

Strong text style

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

Strong text style

Positive text style

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

Positive text style

Negative text style

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

Negative text style

Code text style

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

Code text style

Subdued text style

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.

Subdued text style

Strong text style

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

Strong text style

Positive text style

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

Positive text style

Negative text style

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

Negative text style

Code text style

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

Code text style

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