Badge

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.


Examples

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

Drag to resize example
<Badge>Fulfilled</Badge>
Name
Type
Description
children
string
The content to display inside the badge.
status
enum
Set the color of the badge for the given status.
progress
enum
Render a pip showing the progress of a given task.

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Merchants are pressed for time. They need indicators that let them identify important status changes in Shopify.

Solution

Badges are designed as short, color-coded indicators that help merchants identify critical information quickly.


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.