Badges significa crachá em ingles e parecem pequenos crachás que se colocam num objeto do documento.

Formato :
<h1>Exemplo de formatação do Badge <span class="badge badge-secondary" >New</span></h1>

Note que o tamanho do badge (New) se dá em função to tamanho da tag a ele associada(h1).

---

Formato :
<span class="badge badge-primary">Primary</span>

Primary Secondary Success Danger Warning Info Light Dark

---

Formato :
<div style="padding-left:5px">
        <button type="button" class="btn btn-primary">
            Messages
            <span class="badge badge-light">4</span>
        </button>
        <button type="button" class="btn btn-danger">
            Notifications <span class="badge badge-light">7</span>
        </button>
</div>

Messages 4 Notifications 7

---

Definição sobre badges no bootstrap

.btn .badge{position:relative;top:-1px}

.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}
.badge:empty{display:none}

.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}
.badge-primary{color:#fff;background-color:#007bff}
.badge-primary[href]:focus,.badge-primary[href]:hover{color:#fff;text-decoration:none;background-color:#0062cc}
.badge-secondary{color:#fff;background-color:#6c757d}
.badge-secondary[href]:focus,.badge-secondary[href]:hover{color:#fff;text-decoration:none;background-color:#545b62}
.badge-success{color:#fff;background-color:#28a745}
.badge-success[href]:focus,.badge-success[href]:hover{color:#fff;text-decoration:none;background-color:#1e7e34}
.badge-info{color:#fff;background-color:#17a2b8}
.badge-info[href]:focus,.badge-info[href]:hover{color:#fff;text-decoration:none;background-color:#117a8b}
.badge-warning{color:#212529;background-color:#ffc107}
.badge-warning[href]:focus,.badge-warning[href]:hover{color:#212529;text-decoration:none;background-color:#d39e00}
.badge-danger{color:#fff;background-color:#dc3545}
.badge-danger[href]:focus,.badge-danger[href]:hover{color:#fff;text-decoration:none;background-color:#bd2130}
.badge-light{color:#212529;background-color:#f8f9fa}
.badge-light[href]:focus,.badge-light[href]:hover{color:#212529;text-decoration:none;background-color:#dae0e5}
.badge-dark{color:#fff;background-color:#343a40}
.badge-dark[href]:focus,.badge-dark[href]:hover{color:#fff;text-decoration:none;background-color:#1d2124}