Label

A label is used to represent the category of content

• Prefix: label

• Default

  Default	Name	Description
  Label	label	A standard label, as default

• Attributes

  Attributes	Name	Description
  Basic	basic	Basic design of a label
  Image	image	A label can be formatted to emphasize an image
  Labels	labels	Labels can exist together as a group, setting size and color together
  Small	small	Small button
  Medium	medium	Medium button, default size
  Large	large	Larger button

---

1. Types

1.1 Default

• Example

  <div class = "label">
      <i class = "left icon mail"></i>
  </div>

1.2 Image

• A label can be formatted to emphasize an image
• Example

  <div class = "image label">
      <img src="https://semantic-ui.com/images/avatar/large/ade.jpg">
      Christine
      <i class = "right icon delete"></i>
  </div>

2. Content

2.1 detail

• A label can include a detail
• Example

  <div class="label">
      <i class="icon mail"></i>
      <div class="detail">23</div>
  </div>
  
  <div class="image label">
      <img src="https://semantic-ui.com/images/avatar2/large/patrick.png">
      Johanson
      <div class="detail">student</div>
  </div>

2.2 Icon

• A label can include an icon
• Example

  <div class="label">
       Tag <i class="right icon delete"></i>
  </div>

3. Variation

3.1 basic

• Basic design of a label
• Example

  <div class="basic label">Basic</div>

3.2 color

• A label can have different colors
• Example

  <div class="red label">Red</div>
  <div class="orange label">Orange</div>
  <div class="yellow label">Yellow</div>
  <div class="olive label">Olive</div>
  <div class="green label">Green</div>
  <div class="teal label">Teal</div>
  <div class="blue label">Blue</div>
  <div class="violet label">Violet</div>
  <div class="purple label">Purple</div>
  <div class="pink label">Pink</div>
  <div class="brown label">Brown</div>
  <div class="grey label">Grey</div>
  <div class="black label">Black</div>

3.3 Size

• A label can have different sizes
• Example

  <div class="small label">Small</div>
  <div class="medium label">Medium</div>
  <div class="large label">Large</div>

4. Group

4.1 Group size and color

• Labels can exist together as a group, setting size and color together
• Example

  <div class="large basic green labels">
      <div class="label"> Fun </div>
      <div class="label"> Happy </div>
      <div class="label"> Smart </div>
      <div class="label"> Witty </div>
  </div>