<h1 class="mb-3">Example heading <b-badge variant="primary">New</b-badge></h1>
<h2 class="mb-3">Example heading <b-badge variant="secondary">New</b-badge></h2>
<h3 class="mb-3">Example heading <b-button variant="success">
  Notifications <b-badge variant="light" class="ml-2">4</b-badge>
</b-button></h3>
<h4 class="mb-3">Example heading <b-badge variant="danger">New</b-badge></h4>
<h5 class="mb-3">Example heading <b-badge variant="warning">New</b-badge></h5>
<h6 class="mb-0">Example heading <b-badge variant="info">New</b-badge></h6>

                    
<b-button variant="primary" class="mb-1">
  Notifications <b-badge variant="light" class="ml-2">4</b-badge>
</b-button>
<b-button variant="success" class="mb-1">
  Notifications<b-badge variant="light" class="ml-2">4</b-badge>
</b-button>
<b-button variant="danger" class="mb-1">
  Notifications<b-badge variant="light" class="ml-2">4</b-badge>
</b-button>

                    
<b-button variant="outline-primary" class="mb-1">
  Notifications <b-badge variant="primary" class="ml-2">4</b-badge>
</b-button>
<b-button variant="outline-success" class="mb-1">
  Notifications<b-badge variant="success" class="ml-2">4</b-badge>
</b-button>
<b-button variant="outline-danger" class="mb-1">
  Notifications<b-badge variant="danger" class="ml-2">4</b-badge>
</b-button>

                    
<b-button variant="none" class="iq-bg-primary mb-1">
  Notifications <b-badge variant="primary" class="ml-2">4</b-badge>
</b-button>
<b-button variant="none" class="iq-bg-success mb-1">
  Notifications<b-badge variant="success" class="ml-2">4</b-badge>
</b-button>
<b-button variant="none" class="iq-bg-danger mb-1">
  Notifications<b-badge variant="danger" class="ml-2">4</b-badge>
</b-button>

                    
<b-badge variant="primary">Primary</b-badge>
<b-badge variant="secondary">Secondary</b-badge>
<b-badge variant="success">Success</b-badge>
<b-badge variant="danger">Danger</b-badge>
<b-badge variant="warning">Warning</b-badge>
<b-badge variant="info">Info</b-badge>
<b-badge variant="light">Light</b-badge>
<b-badge variant="dark">Dark</b-badge>

<h5 class="card-title mt-4">Pill badges</h5>
<p>Use the <code>.badge-pill</code> modifier class to make badges more rounded (with a larger <code>border-radius</code> and additional horizontal <code>padding</code>). Useful if you miss the badges from v3.</p>

<b-badge pill variant="primary">Primary</b-badge>
<b-badge pill variant="secondary">Secondary</b-badge>
<b-badge pill variant="success">Success</b-badge>
<b-badge pill variant="danger">Danger</b-badge>
<b-badge pill variant="warning">Warning</b-badge>
<b-badge pill variant="info">Info</b-badge>
<b-badge pill variant="light">Light</b-badge>
<b-badge pill variant="dark">Dark</b-badge>

<h5 class="card-title mt-4">Links</h5>
<p>Using the contextual <code>.badge-*</code> classes on an <code>&lt;a&gt;</code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>

<b-badge href="#" variant="primary">Primary</b-badge>
<b-badge href="#" variant="secondary">Secondary</b-badge>
<b-badge href="#" variant="success">Success</b-badge>
<b-badge href="#" variant="danger">Danger</b-badge>
<b-badge href="#" variant="warning">Warning</b-badge>
<b-badge href="#" variant="info">Info</b-badge>
<b-badge href="#" variant="light">Light</b-badge>
<b-badge href="#" variant="dark">Dark</b-badge>

                    
<b-badge class="border border-primary text-primary" variant="none">Primary</b-badge>
<b-badge class="border border-secondary text-secondary" variant="none">Secondary</b-badge>
<b-badge class="border border-success text-success" variant="none">Success</b-badge>
<b-badge class="border border-danger text-danger" variant="none">Danger</b-badge>
<b-badge class="border border-warning text-warning" variant="none">Warning</b-badge>
<b-badge class="border border-info text-info" variant="none">Info</b-badge>
<b-badge class="border border-light text-light" variant="none">Light</b-badge>
<b-badge class="border border-dark text-dark" variant="none">Dark</b-badge>

<h5 class="card-title mt-4">Pill badges</h5>
<p>Use the <code>.badge-pill</code> modifier class to make badges more rounded (with a larger <code>border-radius</code> and additional horizontal <code>padding</code>). Useful if you miss the badges from v3.</p>
<b-badge class="border border-primary text-primary" pill variant="none">Primary</b-badge>
<b-badge class="border border-secondary text-secondary" pill variant="none">Secondary</b-badge>
<b-badge class="border border-success text-success" pill variant="none">Success</b-badge>
<b-badge class="border border-danger text-danger" pill variant="none">Danger</b-badge>
<b-badge class="border border-warning text-warning" pill variant="none">Warning</b-badge>
<b-badge class="border border-info text-info" pill variant="none">Info</b-badge>
<b-badge class="border border-light text-light" pill variant="none">Light</b-badge>
<b-badge class="border border-dark text-dark" pill variant="none">Dark</b-badge>

<h5 class="card-title mt-4">Links</h5>
<p>Using the contextual <code>.badge-*</code> classes on an <code>&lt;a&gt;</code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
<b-badge href="#" class="border border-primary text-primary" variant="none">Primary</b-badge>
<b-badge href="#" class="border border-secondary text-secondary" variant="none">Secondary</b-badge>
<b-badge href="#" class="border border-success text-success" variant="none">Success</b-badge>
<b-badge href="#" class="border border-danger text-danger" variant="none">Danger</b-badge>
<b-badge href="#" class="border border-warning text-warning" variant="none">Warning</b-badge>
<b-badge href="#" class="border border-info text-info" variant="none">Info</b-badge>
<b-badge href="#" class="border border-light text-light" variant="none">Light</b-badge>
<b-badge href="#" class="border border-dark text-dark" variant="none">Dark</b-badge>