Badge
Badges are used to inform merchants of the tone of an object or of an action that’s been taken.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Slots
No slots found for this component, run `yarn gen:docs` to generate component meta first.
Best practices
Badges benefit merchants by:
- Using established color patterns so that merchants can quickly identify their tone 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 tone 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 tone in the past tense. For example, refunded not refund.
The available badges for financial tone are:
- Authorized
- Pending
- Paid
- Unpaid
- Pending
- Voided
- Partially paid
- Partially refunded
- Refunded
The available badges for fulfillment tone are:
- Fulfilled
- Complete
- Partial
- Unfulfilled
- Restocked
Related components
- To represent an interactive list of categories provided by merchants, use tags
Accessibility
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.