Badge (status)
Badges are used to show the status of an object or the result of an action that has been performed.
Last updated
Badges are used to show the status of an object or the result of an action that has been performed.
Last updated
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):
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.
Use Badges when an object can be mapped into multiple states, and the user needs a way to differentiate between them.
Do not use Badges as a counter (quantifying the number of objects).
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.
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.
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.
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
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...).
