Badges are used to inform merchants of the status of a piece of information or of an action that’s been taken. For example, when a customer has received the item they purchased from a merchant, a badge that says “Completed” shows next to the order number.


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

Drag to resize example


The content to display inside the badge.
"incomplete" | "partiallyComplete" | "complete"
Render a pip showing the progress of a given task.
"success" | "info" | "attention" | "warning" | "new"
Set the color of the badge for the given status.

Best practices

Great 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 (e.g. an order)

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