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.
<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
| Name | Description |
|---|---|
| type: string | The color of the badge |
| rounded: boolean | Toggle the rounded borders |
| ghost: boolean | Toggle ghost mode |
CSS
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>