Text style

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

    Examples

    Down Arrow

    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.


    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

    See Material Design and development documentation about accessibility for Android:

    See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

    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

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

    Don’t

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