Badge

<div class="inline-block bg-blue blue-lightest px-2 fs-s2 br-round m-3">new</div>
<div class="inline-block bg-red red-lightest px-2 fs-s2 br-round m-3">new</div>
<div class="inline-block bg-green green-lightest px-2 fs-s2 br-round m-3">new</div>
<div class="inline-block bg-yellow yellow-lightest px-2 fs-s2 br-round m-3">new</div>

<div class="inline-block bg-blue-lightest blue px-2 fs-s2 br-round m-3">new</div>
<div class="inline-block bg-red-lightest red px-2 fs-s2 br-round m-3">new</div>
<div class="inline-block bg-green-lightest green px-2 fs-s2 br-round m-3">new</div>
<div class="inline-block bg-yellow-lightest yellow px-2 fs-s2 br-round m-3">new</div>

<a href="#" class="inline-block bg-blue blue-lightest px-2 fs-s2 br-round m-3 no-underline hover-opacity-80">new</a>
<a href="#" class="inline-block bg-red red-lightest px-2 fs-s2 br-round m-3 no-underline hover-opacity-80">new</a>
<a href="#" class="inline-block bg-green green-lightest px-2 fs-s2 br-round m-3 no-underline hover-opacity-80">new</a>
<a href="#" class="inline-block bg-yellow yellow-lightest px-2 fs-s2 br-round m-3 no-underline hover-opacity-80">new</a>

<div class="inline-block mr-5">
    <button type="button" class="relative border px-5 py-3 br-2 fs-s2 blue-darker pointer">
    messages
        <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-blue blue-lightest px-2 fs-s3 br-round">10</span>
    </button>
</div>
<div class="inline-block mr-5">
    <button type="button" class="relative border px-5 py-3 br-2 fs-s2 blue-darker pointer">
    messages
        <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-red red-lightest px-2 fs-s3 br-round">10</span>
    </button>
</div>
<div class="inline-block mr-5">
    <button type="button" class="relative border px-5 py-3 br-2 fs-s2 blue-darker pointer">
    messages
        <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-green green-lightest px-2 fs-s3 br-round">10</span>
    </button>
</div>
<div class="inline-block mr-5">
    <button type="button" class="relative border px-5 py-3 br-2 fs-s2 blue-darker pointer">
    messages
        <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-yellow yellow-lightest px-2 fs-s3 br-round">10</span>
    </button>
</div>

<div class="inline-block mr-5">
    <button type="button" class="relative bw-0 px-5 py-3 br-4 fs-s2 bg-blue blue-lightest pointer hover-opacity-80">
    messages
        <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-red red-lightest px-2 fs-s3 br-round">5</span>
    </button>
</div>

<div class="inline-block mr-5">
    <button type="button" class="relative bw-0 px-5 py-3 br-4 fs-s2 bg-blue blue-lightest pointer hover-opacity-80">
    messages
        <span class="absolute top-0 right-0 shift-tr border-white bw-2 block bg-red p-1 br-round"></span>
    </button>
</div>