Get boba!
boba Version 1.7.2

Labels

Labels come in all of boba's colors.
Default Red Orange Yellow Green Teal Blue Indigo Purple Pink 
<span class="label red"> Red </span>
<a class="label green" href="#"> Green </a>

Sizes

Labels can be resized.
Small Default Medium Large 
<span class="label green"> Green </span>

Styles

Change the look of your labels with ease.

Rounded

Make your labels pill-shaped using the .rounded class.
Default Red Orange Yellow Green Teal Blue Indigo Purple Pink 
<span class="label green rounded"> Green </span>

Outlined

Add the .outlined class to make your labels simple colored outlines.
Default Red Orange Yellow Green Teal Blue Indigo Purple Pink 
<span class="label green outlined"> Green </span>

Combinations

Use the .rounded class with the .outlined class to create the perfect label.
Red Green 
<span class="label red rounded outlined"> Red </span>
<a class="label green rounded outlined" href="#"> Green </a>

Join Labels

Combine multiple labels into one segmented label using the .join-labels class.
build with boba
build with boba 
<div class="join-labels">
    <span class="label outlined">build</span>
    <span class="label blue">with</span>
    <span class="label orange">boba</span>
</div>

<div class="join-labels">
    <a class="label rounded outlined" href="#">build</a>
    <a class="label blue" href="#">with</a>
    <a class="label orange rounded" href="#">boba</a>
</div>

Label Groups

Keep multiple labels grouped and equally spaced using the .label-group class.
Single Label
Double Label
build with boba 
<div class="label-group">
    <span class="label pink">Single Label</span>
    <div class="join-labels">
        <span class="label purple">Double</span>
        <span class="label purple outlined">Label</span>
    </div>
    <div class="join-labels">
        <a class="label" href="#">build</a>
        <a class="label blue" href="#">with</a>
        <a class="label orange" href="#">boba</a>
    </div>
</div>