Badge

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

Examples

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

Drag to resize example

Props

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

Default badge

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

Default badge with gray background

Informational badge

Use to call out an object or action as having an important attribute. For example, marking an option as “Recommended” or marking a theme as “Published”.

Informational badge with blue background

Success badge

Use to indicate a successful, completed, or desirable state when it’s important to provide positive reinforcement to merchants. For example, when merchants successfully dispute a chargeback, a success badge shows that says “Funds recovered”.

Success badge with green background

Attention badge

Use when something requires merchants’ attention but the issue isn’t critical. For example, this badge would show next to an order that needs to be reviewed by merchants.

Attention badge with yellow background

Warning badge

Use for critical and time-sensitive issues that require merchants’ attention and potential action. Warning events are often reversible.

Keep in mind that seeing this badge can feel stressful for merchants so it should only be used when absolutely necessary.

Warning badge with orange background

Critical badge

Use for critical and irreversible issues that require merchants’ attention and potential action.

Keep in mind that seeing this badge can feel stressful for merchants so it should only be used when absolutely necessary.

Critical badge with red background

Incomplete badge

Use to indicate when a given task has not yet been completed. For example, when merchants haven’t fulfilled an order.

Incomplete badge. Default badge with incomplete status

Partially complete badge

Use to indicate when a given task has been partially completed. For example, when merchants have partially fulfilled an order.

Partially complete badge. Default badge with partially complete status

Complete badge

Use to indicate when a given task has been completed. For example, when merchants have fulfilled an order.

Complete badge. Default badge with complete status

Default badge

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

Default badge with gray background

Informational badge

Use to call out an object or action as having an important attribute. For example, marking an option as “Recommended” or marking a theme as “Published”.

Informational badge with blue background

Success badge

Use to indicate a successful, completed, or desirable state when it’s important to provide positive reinforcement to merchants. For example, when merchants successfully dispute a chargeback, a success badge shows that says “Funds recovered”.

Success badge with green background

Attention badge

Use when something requires merchants’ attention but the issue isn’t critical. For example, this badge would show next to an order that needs to be reviewed by merchants.

Attention badge with yellow background

Warning badge

Use for critical and time-sensitive issues that require merchants’ attention and potential action. Warning events are often reversible.

Keep in mind that seeing this badge can feel stressful for merchants so it should only be used when absolutely necessary.

Warning badge with orange background

Critical badge

Use for critical and irreversible issues that require merchants’ attention and potential action.

Keep in mind that seeing this badge can feel stressful for merchants so it should only be used when absolutely necessary.

Critical badge with red background

Incomplete badge

Use to indicate when a given task has not yet been completed. For example, when merchants haven’t fulfilled an order.

Incomplete badge. Default badge with incomplete status

Partially complete badge

Use to indicate when a given task has been partially completed. For example, when merchants have partially fulfilled an order.

Partially complete badge. Default badge with partially complete status

Complete badge

Use to indicate when a given task has been completed. For example, when merchants have fulfilled an order.

Complete badge. Default badge with complete 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.