---
layout : 'default'
css    : "label"

title  : 'Label'
type   : 'UI Element'
---

<div class="segment">
  <div class="container">
    <h1>Label</h1>
    <p>Labels can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.</p>
  </div>
</div>
<div class="main container">
  
  <div class="peek">
    <div class="ui vertical pointing menu">
      <a class="active item">Standard</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
      <a class="item">Groups</a>
    </div>
  </div>
  
  <h2>Standard</h2>
  <div class="example">
    <h4>Label</h4>
    <p>A basic label</p>
    <div class="ui label">
      Fun
    </div>
  </div>
  
  <div class="example">
    <h4>Linkable Label</h4>
    <p>If an a tag is used, a label will be formatted as a link</p>
    <a class="ui label">
      Fun
    </a>
  </div>
  
  <div class="example">
    <h4>Label with detail</h4>
    <p>A tag can optionally display a detail</p>
    <div class="ui label">
      Fun
      <div class="detail">New</div>
    </div>
    <div class="ui label">
      Red
      <div class="detail">22</div>
    </div>
  </div>

  <div class="example">
    <h4>Removable label</h4>
    <p>A tag can also be removable</p>
    <div class="ui label">
      Witty
      <i class="icon close"></i>
    </div>
  </div>
  

  <h2>States</h2>
  <p>Labels only have a single ui state</p>
  
  <h2>Variations</h2>
  <div class="example">
    <h4>Colors</h4>
    <p>A label can have different colors</p>
    <a class="ui black label">
      First
    </a>
    <a class="ui green label">
      Fun
    </a>
    <a class="ui red label">
      Happy
    </a>
    <a class="ui blue label">
      Smart
    </a>
    <a class="ui purple label">
      Insane
    </a>
    <a class="ui teal label">
      Exciting
    </a>
  </div>
  <div class="example">
    <h4>Floating</h4>
    <p>A label can float above another element</p>
    <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 label">22</div>
      </a>
    </div>
  </div>
  
  
  
  <div class="example">
    <h4>Pointing</h4>
    <p>A label can point to content next to it</p>
    <form class="ui fluid form">
      <div class="field">
        <input type="text" placeholder="First name">
        <div class="ui pointing black label">
          First Name
        </div>
      </div>
      <div class="ui simple divider"></div>
      <div class="field" placeholder="Last Name">
        <div class="ui pointing below black label">
          Last Name
        </div>
        <input type="text">
      </div>
      <div class="ui simple divider"></div>
      <div class="inline field">
        <input type="text" placeholder="Username">
        <div class="ui pointing left black label">
          Username
        </div>
      </div>
      <div class="ui simple divider"></div>
      <div class="inline field">
        <div class="ui pointing right black label">
          Password
        </div>
        <input type="password">
      </div>
    </form>
  </div>
  
  <div class="example">
    <h4>Attached Label</h4>
    <p>A label attached to a content segment</p>
    <div class="ui segment">
      <div class="ui attached label">Top Left</div>
      <div class="ui right attached label">Top Right</div>
      <div class="ui bottom attached label">Bottom Left</div>
      <div class="ui bottom right attached label">Bottom Right</div>
      <p style="margin:40px 0px;">Hey let's look at labels.</p>
    </div>
  </div>

  <div class="example">
    <h4>Size</h4>
    <p>A label can be small or large</p>
    <div class="ui small label">
      Fun
    </div>
    <br><br>
    <div class="ui large label">
      Fun
    </div>
  </div>
  
  <h2>Groups</h2>
  
  <div class="example">
    <h4>Label Groups</h4>
    <p>Labels can share sizes together</p>
    <div class="ui large labels">
      <div class="ui label">
        Fun
      </div>
      <div class="ui label">
        Happy
      </div>
      <div class="ui label">
        Smart
      </div>
      <div class="ui label">
        Witty
      </div>
    </div>
  </div>
  <div class="example">
    <p>Labels can share colors together</p>
    <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>
  </div>
  
</div>
</body>

</html>