Badge (status)

Badges are used to show the status of an object or the result of an action that has been performed.

Overview

Badges convey information to users (status, actions) that needs to be quickly processed visually.

It needs to be easily understandable and consistent across the Mirakl ecosystem.

Badges vary in status (colors), size (Default or Small) and importance (Primary or Secondary):

	New: When a new item has been created. This status helps to distinguish new objects from old ones.	Associated label: New, Draft
	Pending: When an item is awaiting a user action to continue the process. This status helps to visualise when and where users need to be proactive.	Associated label: Pending, Awaiting approval, In progress
	Success: When an item has reached its goal. This status reinforces positive assessment.	Associated label: Success, Valid, Completed, Paid, Refunded, Received, Synchronized, Open, Enabled
	Warning / Wait System: When an item has encountered a problem users may not be able to resolve on their own (system error...). OR When an item is waiting for the system to process	Associated label: Warning, Wait, Incomplete, Partially paid, Partially refunded
	Error: When an item has encountered a critical problem that prevents it from progressing in the process. This status helps to identify unfinished items.	Associated label: Error, Refused, Invalid, Rejected, Canceled, Suspended, Missing information
	Done: When an item has reached its final step and no more action is required/requested. This status helps to fade out items that don't require attention.	Associated label: Done, Closed, Voided, Deleted, Disabled
	Info: When an item needs to be labeled with a tag but is not part of a specific process (platform model, currency...).

Guidelines

Badges has to be displayed the closest and right after the element it is related to.

• in a Page Title, after the title itself, up to two Badges max. See Page Title properties

• in a panel, after its title, up to two Badges max.

• in a datatable inside a dedicated cell, one badge per cell.

🥊 Primary VS Secondary? Default VS Small?

In most cases, favor the use of Primary Default Badge.

• Secondary Badge can be used to help structure information hierarchy when a tag is not as important as another element on the page.

• Small Badge are mostly used for responsive use cases or smaller panels.

When to use

• Use Badges when an object can be mapped into multiple states, and the user needs a way to differentiate between them.

When not to use

• Do not use Badges as a counter (quantifying the number of objects).

How to use the Tooltip ?

When Badge label is not explicit enough, adding a tooltip is a good way to convey additional information without overloading the component or creating confusing labels.

The (?) indicating the presence of a tooltip is placed inside the badge to clearly state additional information is available regarding the status.

Do not add a custom overlay to the badge to provide additional information. The tooltip's role is to inform when a badge has additional information. Without the tooltip indicator, users will not know additional information is available.

Content

• Reuse preset labels as much as possible. A list is available in Figma variables.

• Don’t rely only on colors and provide easily scannable text for everyone.

Accessibility

Badges convey information using a combination of colors and text. Because colors are not perceived the same way by everyone (disabilities, cultures ...), make sure to use clear, short, and easily scannable text.

This component has been developed to meet accessibility guidelines (use of color, minimum contrast...). Do not interfere with it.

Key takeaways

• Favor the use of Primary Default Badge

• Add a tooltip right next to the badge to provide additional information

• For more consistency, reuse existing and approved microcopy

• Do not use more than two badges next to each other

• Do nos customize an overlay directly on the badge to provide additional information

• Do not use overcomplicated labels