LUMEN
Menu
Product Name
Labels
Labels are available in a variety of colors and styles
Default Labels
Tacos burritos enchilladas Show Code <span class="ui label">Tacos</span>
<span class="ui label">burritos</span>
<span class="ui label">enchilladas</span>variety
Tacos
Joe
Dogs
Mail
Basic
214
Dogs
Blue
images
Labels can have images
Joe
Elliot
Stevie
Show Code
<a class="ui image label">
<img src="https://semantic-ui.com/images/avatar/small/joe.jpg">
Joe
</a>
<a class="ui image label">
<img src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
Elliot
</a>
<a class="ui image label">
<img src="https://semantic-ui.com/images/avatar/small/stevie.jpg">
Stevie
</a>Horizontal
A horizontal label can sit with content along side it
Show Code <div class="ui divided selection list">
<a class="item">
<div class="ui red horizontal label">Fruit</div>
Kumquats
</a>
<a class="item">
<div class="ui purple horizontal label">Candy</div>
Ice Cream
</a>
<a class="item">
<div class="ui red horizontal label">Fruit</div>
Orange
</a>
<a class="item">
<div class="ui horizontal label">Dog</div>
Poodle
</a>
</div>Floating
a label can float above another element
Show Code <div class="ui compact menu">
<a class="item">
<i class="icon mail"></i> Messages
<div class="floating ui red label">22</div>
</a>
<a class="item">
<i class="icon users"></i> Friends
<div class="floating ui teal circular label">22</div>
</a>
</div>Content
Various content capable of being within a label
Detail
A label can contain a detail
Dogs
214
Cats
Show Code
132
<div class="ui label">
Dogs
<div class="detail">214</div>
</div>
<div class="ui label">
Cats
<div class="detail">132</div>
</div>Icon
A label can include an icon
Mail Tag Show Code <a class="ui label">
<i class="mail icon"></i>
Mail
</a>
<a class="ui label">
Tag
<i class="delete icon"></i>
</a>Link
A label can be a link or include one
23
23
View Mail
Show Code
<a href="https://google.com/" class="ui label" target="_blank">
<i class="mail icon"></i> 23
</a>
<div class="ui label">
<i class="mail icon"></i>
23
<a href="https://google.com/" class="detail" target="_blank">View Mail</a>
</div>Variations
Circular
A label can be circular
2 4 6 Show Code <a class="ui circular label">2</a>
<a class="ui circular label">4</a>
<a class="ui circular label">6</a>Basic
A label can reduce complexity
Basic Pointing
Elliot
Show Code
<a class="ui basic label">Basic</a>
<a class="ui pointing basic label">Pointing</a>
<a class="ui basic image label">
<img src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
Elliot
</a>Action
A label can contain an action
Dogs
Dogs
Color
A label can have have different colors
Blue Green Yellow Red Slate (default) Orange Olive Teal Violet Purple Pink Brown Grey Black Show Code <a class="ui red label">Red</a>
<a class="ui orange label">Orange</a>
<a class="ui yellow label">Yellow</a>
<a class="ui olive label">Olive</a>
<a class="ui green label">Green</a>
<a class="ui teal label">Teal</a>
<a class="ui blue label">Blue</a>
<a class="ui violet label">Violet</a>
<a class="ui purple label">Purple</a>
<a class="ui pink label">Pink</a>
<a class="ui brown label">Brown</a>
<a class="ui grey label">Grey</a>
<a class="ui black label">Black</a>Groups
Labels can be grouped together and share properties
Colors
A group can share a color
Show Code <div class="ui blue labels">
<a class="ui label">Fun
<span class="action">
<i class="close icon"></i>
</span>
</a>
<a class="ui label">Happy<div class="detail">22</div></a>
<a class="ui label">Smart</a>
<a class="ui label">Insane</a>
<a class="ui label">Exciting</a>
</div>Circular
A group can share shape
Show Code <div class="ui circular labels">
<a class="ui label">11</a>
<a class="ui label">22</a>
<a class="ui label">33</a>
<a class="ui label">44</a>
<a class="ui label">141</a>
</div>Pointing
Labels can point to fields nearby
Show Code <form class="ui form grid">
<div class="two column row">
<div class="field column">
<input type="text" placeholder="First name">
<div class="ui pointing label">
Please enter a value
</div>
</div>
<div class="field column">
<div class="ui bottom pointing label">
Please enter a value
</div>
<input type="text" placeholder="Last name">
</div>
</div>
<div class="row">
<div class="ui divider column"></div>
</div>
<div class="two column row">
<div class="column">
<div class="inline field">
<input type="text" placeholder="Username">
<div class="ui left pointing label">
That name is taken!
</div>
</div>
</div>
<div class="column">
<div class="inline field">
<div class="ui right pointing label">
Your password must be 6 characters or more
</div>
<input type="password">
</div>
</div>
</div>
</form>Corner Labels
A label can position itself in the corner of an element
Show Code
<div class="ui four column grid">
<div class="column">
<div class="ui fluid image">
<a class="ui left corner label">
<i class="heart icon"></i>
</a>
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui red right corner label">
<i class="save icon"></i>
</a>
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
</div>
</div>Example on table cell
| voluptatem | qui | quas | dolorum |
|---|---|---|---|
| ex | 1095403752 | natus | nisi |
<parent class="lds-has-corner">
<a class="ui corner solid label" data-content="Add users to your feed" data-variation="inverted">
<i class="external square alternate azure icon"></i>
</a>
</parent>
<script type="text/javascript">
$('.lds-has-corner .corner').popup();
</script>