Open In App

Semantic-UI Icon Buttons Group

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI Button offers several types of micro button components like Types, Groups, Content, States, Variations, and Group Variations.

In this article, we will learn about Icon Buttons Variation.

Semantic UI Icon Buttons Class:

  • icon buttons: This class is used to include the group of icon buttons.

Syntax:

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

Note: By default, the button group is horizontal, to make it vertical we need to add the “vertical” class to the parent div.

Example 1: This example illustrates both horizontal and horizontal icon buttons classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
      
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic UI Icon button group</strong><br/>
      <div>
        <strong>Horizontal Icon Buttons:</strong>
        <div class="ui icon buttons">
          <button class="ui button">
            <i class="like red icon"></i>
          </button>
          <button class="ui button">
            <i class="comment blue icon"></i>
          </button>
          <button class="ui button">
            <i class="share green icon"></i>
          </button>
        </div>
        <br><br>
      </div>
    </center>
</body>
</html>


Output: 

Semantic-UI Icon Buttons Group

Semantic-UI Icon Buttons Group

Example 2: This example illustrates both horizontal and vertical icon buttons classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
      
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic UI Icon button group</strong><br/>
      <div>
        <strong>Vertical Icon Button group:</strong>
        <div class="ui vertical icon buttons">
          <button class="ui red button">
            <i class="play icon"></i>
          </button>
          <button class="ui blue button">
            <i class="backward icon"></i>
          </button>
          <button class="ui green button">
            <i class="random icon"></i>
          </button>
        </div>
      </div>
    </center>
</body>
</html>


Output:

Semantic-UI Icon Buttons Group

Semantic-UI Icon Buttons Group

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



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