Labels as removable tags

1. Labels as removable tags

Imagine you have a part of a web application, where you can choose tags and apply them to an item like - uhm - an X-Man!

Using labels as we know them from the docs, we'd have a situation similar to the following:

 
<select name="superpower">
<!-- superpower options -->
</select>

 
<p>Superpowers:</p>
<span class="label label-default">Huge Whiskers</span>
<span class="label label-default">Blue Skin</span>
...

<span class="label label-default">Dumbass Glasses</span>

Well, yes. But we can do better.
Let's make real tags of them, with a proper icon and a remove link.
 
<select name="superpower">
<!-- superpower options -->
</select>

<p>Superpowers:</p>
<span class="label label-default">
<span class="glyphicon glyphicon-tag"></span>&#32;
Huge Whiskers&#32;
<a href="/remove-tag">
<span class="glyphicon glyphicon-remove"></span>
</a>
</span>
<span class="label label-default">
<span class="glyphicon glyphicon-tag"></span>&#32;
Blue Skin&#32;
<a href="/remove-tag">
<span class="glyphicon glyphicon-remove"></span>
</a>
</span>

...

<span class="label label-default">
<span class="glyphicon glyphicon-tag"></span>&#32;

 Dumbass Glasses 

<a href="/remove-tag">
<span class="glyphicon glyphicon-remove"></span>
</a>
</span>


Better. But there's something even more unusual we can do if we want to improve this.

2. Labels + badges

Yep, using badges.
The remove link will become a badge, and also a button for better styling.
As a finishing touch, we need a custom class to let the labels properly wrap the new elements:
 
<style>
.label-fatter {
padding: 0.8em;
}
</style>

<span class="label label-default label-fatter">
<span class="glyphicon glyphicon-tag"></span>&#32;

Huge Whiskers&#32;

 <a href="/remove-tag" class="btn btn-default badge">
<span class="glyphicon glyphicon-remove"></span>
   </a>

</span>
<span class="label label-default label-fatter">
<span class="glyphicon glyphicon-tag"></span>&#32;

Blue Skin&#32;


<a href="/remove-tag" class="btn btn-default badge">
<span class="glyphicon glyphicon-remove"></span>
   </a>
    </span>

...

<span class="label label-default label-fatter">
<span class="glyphicon glyphicon-tag"></span>&#32;

Dumbass Glasses&#32;


<a href="/remove-tag" class="btn btn-default badge">
<span class="glyphicon glyphicon-remove"></span>
   </a>
    </span>
Not bad :)

3. Labels as squared badges

In certain situations, you could prefer a squared look instead of the rounded one of badges.
One way to obtain it, is to add a custom CSS class and override the rounded borders of badges.

Or, you could just use labels.

Let's see them in action:

<h4>Translations</h4>
<ul class="list-unstyled">
<li><code class="label label-info">it_IT</code> Calcio</li>
<li><code class="label label-info">en_US</code> Soccer</li>
<li><code class="label label-info">en_GB</code> Football</li>
</ul>
Did you ever think about making labels out of <code> elements?