Semantic-UI Icon Buttons Group

Last Updated : 16 Feb, 2022

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        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:

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

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        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:

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

Semantic-UI Button Groups

mishrapriyank17

Improve

Article Tags :

Semantic-UI Icon Buttons Group

Similar Reads

Thank You!

What kind of Experience do you want to share?