Badge

Basic

<h1>Example heading {% component "Badge" bg="secondary" %}New{% endcomponent %}</h1>

Preview:

Example heading New

In Button

<button type="button" class="btn btn-primary">
              Notifications {% component "Badge" bg="secondary" %}4{% endcomponent %}
            </button>

Preview:

Pill

{% component "Badge" bg="primary" pill=True %}Primary{% endcomponent %}

Preview:

Primary

Bg Primary

{% component "Badge" bg="primary" %}Primary{% endcomponent %}

Preview:

Primary

Bg Secondary

{% component "Badge" bg="secondary" %}Secondary{% endcomponent %}

Preview:

Secondary

Bg Success

{% component "Badge" bg="success" %}Success{% endcomponent %}

Preview:

Success

Bg Danger

{% component "Badge" bg="danger" %}Danger{% endcomponent %}

Preview:

Danger

Bg Warning

{% component "Badge" bg="warning" %}Warning{% endcomponent %}

Preview:

Warning

Bg Info

{% component "Badge" bg="info" %}Info{% endcomponent %}

Preview:

Info

Bg Light

{% component "Badge" bg="light" %}Light{% endcomponent %}

Preview:

Light

Bg Dark

{% component "Badge" bg="dark" %}Dark{% endcomponent %}

Preview:

Dark

Pill Primary

{% component "Badge" bg="primary" pill=True %}Primary{% endcomponent %}

Preview:

Primary

Pill Secondary

{% component "Badge" bg="secondary" pill=True %}Secondary{% endcomponent %}

Preview:

Secondary

Pill Success

{% component "Badge" bg="success" pill=True %}Success{% endcomponent %}

Preview:

Success

Pill Danger

{% component "Badge" bg="danger" pill=True %}Danger{% endcomponent %}

Preview:

Danger

Pill Warning

{% component "Badge" bg="warning" pill=True %}Warning{% endcomponent %}

Preview:

Warning

Pill Info

{% component "Badge" bg="info" pill=True %}Info{% endcomponent %}

Preview:

Info

Pill Light

{% component "Badge" bg="light" pill=True %}Light{% endcomponent %}

Preview:

Light

Pill Dark

{% component "Badge" bg="dark" pill=True %}Dark{% endcomponent %}

Preview:

Dark