Logo
Hi, Sean S

Badges 

<div>
    <h2>Example heading
        <b-badge>New</b-badge>
    </h2>
    <h3>Example heading
        <b-badge>New</b-badge>
    </h3>
    <h4>Example heading
        <b-badge>New</b-badge>
    </h4>
    <h5>Example heading
        <b-badge>New</b-badge>
    </h5>
    <h6>Example heading
        <b-badge>New</b-badge>
    </h6>
</div>

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Actionable badges 

<div>
    <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>
</div>

Quickly provide actionable badges with hover and focus states by specifying either the href prop (links) or to prop (router-links):

Contextual variations 

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

Add any of the following variants via the variant prop to change the appearance of a <b-badge>: default, primary, success, warning, info, and danger. If no variant is specified default will be used.

PrimarySecondarySuccessDangerWarningInfoLightDark

Pill badges 

<div>
    <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>
</div>

Use the pill prop to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from Bootstrap v3.

PrimarySecondarySuccessDangerWarningInfoLightDark