Open In App

Semantic-UI Button Group Variations Labeled Icon Buttons

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI Button offers several type of micro button component like Types, Groups, Content, States, Variations and Group Variations.

The Button group variations have different kind of buttons such as Vertical, Icon, Labeled, Mixed Group, Equal Width, Colored, Basic and different sizes buttons in group variations. In this article we will learn Button Group Variations Labeled Icon Buttons.

Semantic-UI Button Group Variations Labeled Icon Buttons Class:

  • labeled icon: This class used to include the labeled icon in the button of groups.

Syntax:

<div class="ui labeled icon buttons">
  <button class="ui button">
    <i class=""></i>
  </button>
</div>

Below example illustrate the Button Variations Group Labeled Icon:

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Button Group Variations labeled Icon Buttons</strong>
            <br><br>
            <div>
            <strong>Labeled Icon Buttons:</strong>
            <div class="ui labeled icon buttons">
              <button class="ui red button">
                <i class="like icon"></i>
                Like
              </button>
              <button class="ui green button">
                <i class="play icon"></i>
                Play
              </button>
              <button class="ui blue button">
                <i class="shuffle icon"></i>
                Shuffle
              </button>
            </div>
            <br><br>
            <strong>Vertical Labeled Icon Buttons:</strong>
            <div class="ui vertical labeled icon buttons">
              <button class="ui red button">
                <i class="like icon"></i>
                Like
              </button>
              <button class="ui green button">
                <i class="play icon"></i>
                Play
              </button>
              <button class="ui blue button">
                <i class="shuffle icon"></i>
                Shuffle
              </button>
            </div>
            </div>
        </center>
    </body>
</html>


Output: 

Semantic-UI Button Group Variations Labeled Icon Buttons

Semantic-UI Button Group Variations Labeled Icon Buttons

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



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