# Badges

## Badges are simple components that you can use to represent the status of an item.

## Examples

Badges serve many purposes: they can indicate new notifications, show how many emails you have, etc. Here's a few examples:

I'm a badge! I'm a blue badge! 5

## Adding badges

Badges are made with <span> tags, so adapt the text item's font size. For example:

# Header 1 Badge

## Header 2 Badge

### Header 3 Badge

Paragraph Badge

Badge outside of text Badge with gradient

    <h1>Header 1 <span class="badge dark">Badge</span></h1>
    <h2>Header 2 <span class="badge red">Badge</span></h2>
    <h3>Header 3 <span class="badge green">Badge</span></h3>
    <p>Paragraph <span class="badge blue">Badge</span></p>
    <span class="badge yellow">Badge outside of text</span>
    <span class="badge gradient-blue">Badge with gradient</span>

Generally, to add a badge, use <span class="badge XXX">, where XXX is any Magic colour, including gradients.

## Rounded badges

Warning: This feature is not functional yet. DO NOT use it in a production environment.

When bades contain only a single number or letter, you can make them circular:

### 5

    <span class="badge red round">5</span>

These work exactly the same as regular badges, so can be attached to any text item and have any Magic colour.

## Icon badges

Your Magic badges can also have FontAwesome icons:

50 new messages 22 new questions

    <span class="badge dark"><i class="fas fa-question-circle"></i> 22 new questions</span>