Switch to M&TOverview
Badge
Badges are small labels that appear in proximity to larger UI elements and relay a status, property or other metadata related to the larger object. Badges are not interactive and should only convey relevant information.
Variants
Inactive
Inactive Badge
Used to indicate a neutral property status or metadata that requires less attentionPositive
Positive Badge
Used to indicate a positive property or status, such as "delivered" or "active"Processing
Processing Badge
Used to indicate an in-progress property or status, such as "in review" or "pending"Negative
Negative Badge
Used to indicate a negative property or status, such as "failed" or "rejected"Legacy Badges
Inactive
Inactive Badge
Used to indicate a neutral property status or metadata that requires less attentionPositive
Positive Badge
Used to indicate a positive property or status, such as "delivered" or "active"Processing
Processing Badge
Used to indicate an in-progress property or status, such as "in review" or "pending"Negative
Negative Badge
Used to indicate a negative property or status, such as "failed" or "rejected"Design Environment
Because badges always give information about another interface element, they cannot stand alone. Place them near the object in the layout they are describing.
Microcopy
Per the status writing guidelines, copy should be kept concise. In badges, it's best to display on or two short words. Do not use full sentences.