Open In App

Semantic-UI Button Labeled Icon Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. In this article let us see the buttons of labeled icon types.

Semantic UI provides various classes with buttons to customize. In this article, we will see the buttons of labeled icon types. The labeled icon class should be mentioned when we want to use buttons of labeled icon type. The labeled icon buttons are accompanied by the labels.

Semantic UI Button labeled Icon Type class:

  • labeled: This class is used to make the labeled button.
  • icon: This class is used to set the icon for the button.

Syntax:

<button class="ui  labeled-icon-class button">
    ...
</button>

Example 1: The following example demonstrates the buttons with the labeled icon type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui green header">
            Geeksforgeeks
        </h1>
        <strong>
            Semantic UI Button Types Label
        </strong>
        <br /><br />
          
        <div class="ui left labeled icon button">
            <i class="left arrow icon"></i>
            Previous
        </div>
        <div class="ui right labeled icon button">
            <i class="right arrow icon"></i>
            Next
        </div>
    </center>
</body>
  
</html>


Output:

Semantic-UI Button Labeled Icon Type

Semantic-UI Button Labeled Icon Type

Example 2: The following example demonstrates the buttons with the labeled icon type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui green header">Geeksforgeeks</h1>
        <strong>Semantic UI Button Types Label</strong>
        <br /><br />
          
        <div style="margin-top:10px" 
            class="ui left labeled  button">
            <a class="ui green basic right pointing label">
                100
            </a>
            <div class="ui green icon button">
                <i class="thumbs up icon"></i>
                Like
            </div>
        </div>
        <div class="ui left labeled button">
            <a class="ui red basic right pointing label">
                2
            </a>
            <div class="ui red icon button">
                <i class="thumbs down icon"></i>
                Dislike
            </div>
        </div>
        <div class="ui left labeled button">
            <a class="ui blue basic right pointing label">
                5
            </a>
            <div class="ui blue icon button">
                <i class="share square icon"></i>
                Shares
            </div>
        </div>
    </center>
</body>
  
</html>


Output:

Semantic-UI Button Labeled Icon Type

Semantic-UI Button Labeled Icon Type

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



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