Badge

    Badges are used to inform merchants of the status of an object or of an action that’s been taken.

    Examples

    Down Arrow

    Use to give a non-critical status update on a piece of information or action.


    Best practices

    Badges benefit merchants by:

    • Using established color patterns so that merchants can quickly identify their status or importance level
    • Being clearly labeled with short, scannable text
    • Being positioned to clearly identify the object they’re informing or labelling

    Content guidelines

    Badge label

    Badge labels should:

    • Use a single word to describe the status of an object.
    • Only use two words if you need to describe a complex state. For example, “Partially refunded” and “Partially fulfilled”.
    • Always describe the status in the past tense. For example, refunded not refund.

    The available badges for financial status are:

    • Authorized
    • Pending
    • Paid
    • Unpaid
    • Pending
    • Voided
    • Partially paid
    • Partially refunded
    • Refunded

    The available badges for fulfillment status are:

    • Fulfilled
    • Complete
    • Partial
    • Unfulfilled
    • Restocked

    Don’t

    Don’t use alternatives to existing badge options. Only create a new badge option if there aren’t any existing options to communicate the status you need.


    • To represent an interactive list of categories provided by merchants, use tags

    Accessibility

    See Material Design and development documentation about accessibility for Android:

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

    Badges that convey information with icons or color include text provided by the visually hidden component. This text is read out by assistive technologies like screen readers so that merchants with vision issues can access the meaning of the badge in context.