Semantic-UI Button Group Variations Icon Buttons

Last Updated : 08 Feb, 2022

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 Icon Buttons.

Semantic-UI Button Group Variations Icon Buttons Class:

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

Syntax:

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

Below example illustrate the Button Variations Group Icon:

Example:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Button Group Variations Icon Buttons</strong>
            <br><br>
            <div>
                <strong>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="pause green icon"></i>
                  </button>
                  <button class="ui button">
                    <i class="share blue icon"></i>
                  </button>
                </div>
            </div>
        </center>
    </body>
</html>