Switch to Wilmington
Overview

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

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 attention
<div class="c-badge--inactive">Inactive</div>
Copy
Positive
Positive Badge
Used to indicate a positive property or status, such as "delivered" or "active"
<div class="c-badge--positive">Positive</div>
Copy
Processing
Processing Badge
Used to indicate an in-progress property or status, such as "in review" or "pending"
<div class="c-badge--processing">Processing</div>
Copy
Negative
Negative Badge
Used to indicate a negative property or status, such as "failed" or "rejected"
<div class="c-badge--negative">Negative</div>
Copy

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.