Skip to contentShopify logoPolaris

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

Strong

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

Positive

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

Negative

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

Warning

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

Code

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

    On this page