Switch to WilmingtonOverview
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
Badges are stroked in semantic colors so the metadata can be easily recognized. The copy in the variants should change as needed to reflect an item's possible statuses.
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
These badge styles are now deprecated.
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.