semantic-ui
  1. semantic-ui-label
PreviousNext

Semantic UI Label

Semantic UI is a widely popular front-end development framework that offers a wide range of pre-built user interface (UI) components including labels. Labels are used to attach metadata to the content of a web page, and make it easily identifiable to users.

Syntax

The basic syntax for a Semantic UI label is:

<div class="ui label">Label Text</div>

However, Semantic UI provides several additional classes that can be added to customize the label styling, including:

  • tag: for a smaller, rounded label
  • image: for an image label
  • pointing: for a label with an arrow pointing to a nearby element
  • basic: for a simple, subtle label
  • icon: for a label with an icon

Example

Here's an example of how labels can be used to display relevant topics on a blog post.

<div class="ui label">Technology</div>
<div class="ui label">Science</div>
<div class="ui label">Culture</div>
Try Playground

Image

A label can be formatted to emphasize an image.

<a class="ui image label">
  <img src="https://static.additionalsheet.com/images//others/lucy.jpg">
  Joe
</a>
<a class="ui blue image label">
  <img src="https://static.additionalsheet.com/images//others/josh.jpg">
  Veronika
  <div class="detail">Friend</div>
</a>
<div class="ui image label">
  <img src="https://static.additionalsheet.com/images//others/alisa.jpg">
  Adrienne
  <i class="delete icon"></i>
</div>
Try Playground

Pointing

A label can point to content next to it.

<form class="ui fluid form">
  <div class="field">
    <input type="text" placeholder="First name">
    <div class="ui pointing label">
      Please enter a value
    </div>
  </div>
  <div class="ui divider"></div>
  <div class="field" placeholder="Last Name">
    <div class="ui pointing below label">
      Please enter a value
    </div>
    <input type="text">
  </div>
  <div class="ui divider"></div>
  <div class="inline field">
    <input type="text" placeholder="Username">
    <div class="ui left pointing label">
      That name is taken!
    </div>
  </div>
  <div class="ui divider"></div>
  <div class="inline field">
    <div class="ui right pointing label">
      Your password must be 6 characters or more
    </div>
    <input type="password">
  </div>
</form>
Try Playground

Corner

A label can position itself in the corner of an element.

<div class="ui two 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://static.additionalsheet.com/images/semantic-ui/2023-12-05square-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://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
    </div>
  </div>
</div>
Try Playground

Tag

A label can appear as a tag.

<a class="ui tag label">New</a>
<a class="ui red tag label">Upcoming</a>
<a class="ui teal tag label">Featured</a>
Try Playground

Ribbon

A label can appear as a ribbon attaching itself to an element.

<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 ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <a class="ui blue ribbon label">Community</a> User Reviews
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
     
    </div>
  </div>
  <div class="column">
    <div class="ui fluid image">
      <div class="ui black ribbon label">
        <i class="hotel icon"></i> Hotel
      </div>
      <img src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
    </div>
  </div>
</div>
Try Playground

Horizontal

A horizontal label is formatted to label content along-side it horizontally.

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

Floating

A label can float above another element.

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

Circular

A label can be circular

<a class="ui red circular label">2</a>
<a class="ui orange circular label">2</a>
<a class="ui yellow circular label">2</a>
<a class="ui olive circular label">2</a>
<a class="ui green circular label">2</a>
<a class="ui teal circular label">2</a>
<a class="ui blue circular label">2</a>
<a class="ui violet circular label">2</a>
<a class="ui purple circular label">2</a>
<a class="ui pink circular label">2</a>
<a class="ui brown circular label">2</a>
<a class="ui grey circular label">2</a>
<a class="ui black circular label">2</a>
Try Playground

Size

A label can be small or large.

<div class="ui mini label">
  Mini
</div>
<div class="ui tiny label">
  Tiny
</div>
<div class="ui small label">
  Small
</div>
<div class="ui label">
  Medium
</div>
<div class="ui large label">
  Large
</div>
<div class="ui big label">
  Big
</div>
<div class="ui huge label">
  Huge
</div>
<div class="ui massive label">
  Massive
</div>
Try Playground

Group Size

Labels can share sizes together

<div class="ui huge 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>
Try Playground

This would display three separate labels, one for each relevant topic associated with the blog post.

Use

Labels are used to provide additional context and information to users, and can be used in a variety of settings. Some common use cases for labels include:

  • Tagging content with relevant topics or categories
  • Indicating the status of an item (e.g. "New", "Sale")
  • Displaying information about a specific element on a page (e.g. "Hover for more info")

Importance

Labels are an essential component of modern web design, and are important for providing users with a clear understanding of the content they are viewing. They are especially useful for organizing and categorizing large amounts of information.

Summary

Overall, Semantic UI labels are a powerful tool for providing additional context and information to users in a clear and concise way. They can be customized with a variety of different styles and are an essential component of web design.

InputList
Published on: