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 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.