They're useful when you want to add additional info. Like a version number of a project or for status messages for individual items.

34 unread messages
<span class="c-badge">34 unread messages</span> 

Colors

Badges come as default, brand, info, warning, success and error

To use, add the color modifier class:

Default Brand Info Warning Success Error
<span class="c-badge">Default</span>
<span class="c-badge c-badge--brand">Brand</span>
<span class="c-badge c-badge--info">Info</span>
<span class="c-badge c-badge--warning">Warning</span>
<span class="c-badge c-badge--success">Success</span>
<span class="c-badge c-badge--error">Error</span> 

Rounded

Make your badges rounded with the .c-badge--rounded modifier.

Default Brand Info Warning Success Error
<span class="c-badge c-badge--rounded">Default</span>
<span class="c-badge c-badge--rounded c-badge--brand">Brand</span>
<span class="c-badge c-badge--rounded c-badge--info">Info</span>
<span class="c-badge c-badge--rounded c-badge--warning">Warning</span>
<span class="c-badge c-badge--rounded c-badge--success">Success</span>
<span class="c-badge c-badge--rounded c-badge--error">Error</span> 

Ghost

Remove your badges bodies with the .c-badge--ghost modifier.

Default Brand Info Warning Success Error
<span class="c-badge c-badge--rounded c-badge--ghost c-badge">Default</span>
<span class="c-badge c-badge--rounded c-badge--ghost c-badge--brand">Brand</span>
<span class="c-badge c-badge--rounded c-badge--ghost c-badge--info">Info</span>
<span class="c-badge c-badge--rounded c-badge--ghost c-badge--warning">Warning</span>
<span class="c-badge c-badge--rounded c-badge--ghost c-badge--success">Success</span>
<span class="c-badge c-badge--rounded c-badge--ghost c-badge--error">Error</span>