Text style

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

Deprecated

This component is no longer supported. Please use the Text component instead.

Mapping to the Text component

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="bold">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>

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>