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
214
Mail Basic
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

Fruit
Kumquats
Candy
Ice Cream
Fruit
Orange
Dog
Poodle
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

Messages
22
 Friends
22
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
132
Show Code 
  <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

Fun Happy
22
 Smart Insane Exciting
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

11 22 33 44 141
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

Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more
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

Add class .lds-has-corner to element in which you want to add corner label (in this case on first td), then add snippet below inside your element.
voluptatem qui quas dolorum
ex 1095403752 natus nisi
Show Code 
<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>