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>

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

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

Color

A label can have have different colors

Red Orange Yellow Olive Green Teal Blue 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

Smart Insane Exciting

Show Code

  <div class="ui blue labels">
    <a class="ui label">Fun <i class="icon close"></i></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

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>

Ribbon

A label can appear as a ribbon, with or without an icon

Overview

Account Details

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Community

User Reviews

Recipes

Reviews

Delicious!

Show Code

<div class="ui two column grid">
  <div class="column">
    <div class="ui raised segment">
      <a class="ui red ribbon label">Overview</a>
      <span>Account Details</span>
      <p>lorem</p>
      <a class="ui blue ribbon label">Community</a> User Reviews
      <p>lorem</p>
    </div>
  </div>
  <div class="column">
    <div class="ui segment">
      <a class="ui orange right ribbon label">Specs</a>
      <p>lorem</p>
      <a class="ui teal right ribbon label">Reviews</a>
      <p>lorem</p>
    </div>
  </div>
</div>

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.

quis	sit	illo	fuga
maxime	8819964763	ipsum	ut

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>

Product Name

PAGES

Labels

Default Labels

images

Horizontal

Floating

Content

Detail

Icon

Link

Variations

Circular

Basic

Color

Groups

Colors

Circular

Pointing

Ribbon

Account Details

User Reviews

Recipes

Delicious!

Corner Labels

Example on table cell