Badge Component

Badges are used to label a status of an object or an action that’s been taken.

Badge Variations

Success Success To label a successful, completed or desirable state. Success, Paid, Done, Reconciled, Etc.
Error Error To label a critical issue, failed, unsuccessful or any undesirable state. Failed, Overdue, Rejected, Etc.
Warning Warning To label a warning or alarming state.
Neutral Neutral To label something that is neutral and non-critical to user’s action

Guideline

• Use clear and short text labels that are easy to scan. Keep the text label concise and use the shortest words as possible, for example; use “pending” rather than “not complete”, use “unpaid” rather than “not paid”, use “failed” rather than “unsuccessful”
• Positioned clearly to be relevant with the object being labeled. For example, on the same row of the table.

When to use

• Indicate a status label of an object or an action.
• Use badges whenever possible for the status data column on a table.

When not to use

• For labeling any identification data. For example; Credit Card, BCA, Aggregator, Etc.
• For labeling tag categories for users to choose, usually on a search result.

Code