Badge

Examples

<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>
new
new
new
new

Badge Inverse

<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>
new
new
new
new

Link Badge

<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>
new new new new

Badge on Button

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

Badge as Indicator

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