Open In App

Semantic-UI Button Labeled Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic-UI Button Labeled is one of the most important buttons types of Semantic-UI Button Types. In this article, we will learn about the Semantic-UI Button Labeled type. 

Semantic-UI Button Labeled Type Class:

  • labeled: It is used to add a label to our button.

Syntax:

<div class="ui left labeled button">
...
</div>

Below examples illustrate the Semantic-UI Button Labeled Type:

Example 1: In this example, we will create a label button without color.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet" />
          
    <style>
        button {
            width: 150px;
        }
  
        div {
            margin-left: 15%;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="ui header green">Geeksforgeeks</h1>
        <strong>Semantic-UI Button Labeled Types</strong>
    </center>
    <br><br>
    <div>
        <strong>Labeled:</strong>
        <div class="ui labeled button">
            <div class="ui button">
                <i class="heart icon"></i> Like
            </div>
            <a class="ui basic left pointing label">
                2,048
            </a>
        </div>
        <div class="ui left labeled button">
            <a class="ui basic right pointing label">
                2,048
            </a>
            <div class="ui button">
                <i class="user icon"></i>Follower
            </div>
        </div>
        <div class="ui left labeled button">
            <a class="ui basic right pointing label">
                1,048
            </a>
            <div class="ui icon button">
                <i class="fork icon"></i>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Button Labeled Type

Semantic-UI Button Labeled Type

Example 2: In this example, we will create a label button with color.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet" />
          
    <style>
        button {
            width: 150px;
        }
  
        div {
            margin-left: 15%;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="ui header green">Geeksforgeeks</h1>
        <strong>Semantic-UI Button Labeled Types</strong>
    </center>
    <br><br>
    <div>
        <strong>Labeled:</strong>
        <div class="ui labeled button" tabindex="0">
            <div class="ui red button">
                <i class="heart icon"></i> Like
            </div>
            <a class="ui basic left pointing label">
                2,048
            </a>
        </div>
        <div class="ui left labeled button">
            <a class="ui basic right pointing label">
                2,048
            </a>
            <div class="ui button">
                <i class="user icon"></i>Follower
            </div>
        </div>
        <div class="ui left labeled button">
            <a class="ui basic right pointing label">
                1,048
            </a>
            <div class="ui icon blue button">
                <i class="fork icon"></i>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Button Labeled Type

Semantic-UI Button Labeled Type

Reference: https://semantic-ui.com/elements/button.html#labeled



Last Updated : 16 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads