Badges

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> 
default brand info warning success error

default brand info warning success error

default brand info warning success error
<blaze-badge>default</blaze-badge>
<blaze-badge type="brand">brand</blaze-badge>
<blaze-badge type="info">info</blaze-badge>
<blaze-badge type="warning">warning</blaze-badge>
<blaze-badge type="success">success</blaze-badge>
<blaze-badge type="error">error</blaze-badge>
<br />
<br />
<blaze-badge rounded>default</blaze-badge>
<blaze-badge rounded type="brand">brand</blaze-badge>
<blaze-badge rounded type="info">info</blaze-badge>
<blaze-badge rounded type="warning">warning</blaze-badge>
<blaze-badge rounded type="success">success</blaze-badge>
<blaze-badge rounded type="error">error</blaze-badge>
<br />
<br />
<blaze-badge ghost rounded>default</blaze-badge>
<blaze-badge ghost rounded type="brand">brand</blaze-badge>
<blaze-badge ghost rounded type="info">info</blaze-badge>
<blaze-badge ghost rounded type="warning">warning</blaze-badge>
<blaze-badge ghost rounded type="success">success</blaze-badge>
<blaze-badge ghost rounded type="error">error</blaze-badge> 

Attributes

Attribute Description
type The color of the badge
rounded (boolean) Toggle the rounded borders
ghost (boolean) Toggle ghost mode