Open In App

Semantic-UI Button Group Variations

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Button Group also offers a group variation of buttons, there are Icon buttons, labelled icon buttons, mixed group buttons, equal width, coloured buttons, basics buttons, Group sizes buttons, etc.

Semantic UI Button Group Variations Classes:

  • Vertical Buttons: This class is used to set button groups formatted to appear vertically.
  • Icon Buttons: This class is used to set button groups formatted as icons.
  • Labeled Icon Buttons: This class is used to set button groups formatted as labelled icons.
  • Mixed Group: This class is used to set button groups formatted to use multiple button types together.
  • Equal Width: This class is used to set button groups that can have their widths divided evenly.
  • Colored Buttons: This class is used to set button groups that can have a shared colour.
  • Basic Buttons: This class is used to set button groups that can be less pronounced.
  • Group Sizes: This class is used to set button groups that can have a shared size.

Syntax:

 <div class="ui Group-Variations-Class">
  <button class="ui button">...</button>
  
  <! this is where you want to use icons>
  <button class="ui button">
         <i class="...."></i>
  </button>
</div>

The below example will illustrate the Semantic-UI Button Group Variations:

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <link href=
        rel="stylesheet" />
        <style>
            button {
                width: 170px;
            }
            .container {
                width: 600px;
                margin-left: 10%;
            }
        </style>
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Button Group Variations</strong>
        </center>
        <br><br>
        <div class="container">
        <div>
            <strong>Vertical Buttons:</strong>
            <div class="ui vertical  buttons">
              <button class="ui button">Feed</button>
              <button class="ui button">Messages</button>
              <button class="ui button">Events</button>
            </div>
        </div>
        <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>
        <br>
        <div>
            <strong>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>
        <br>
        <div>
            <strong>Mixed Group:</strong>
            <div class="ui green buttons">
              <button class="ui labeled icon button">
                <i class="left chevron icon"></i>
                Previous
              </button>
              <button class="ui button">
                <i class="play icon"></i>
                Play
              </button>
              <button class="ui right labeled icon button">
                Next
                <i class="right chevron icon"></i>
              </button>
            </div>
        </div>
        </div>
    </body>
</html>


Output:

Semantic-UI Button Group Variations

Semantic UI Button Group Variations

Example 2:

HTML




<!DOCTYPE html>
<html>
    <head>
        <link href=
        rel="stylesheet" />
        <style>
            button {
                width: 170px;
            }
            .container {
                width: 600px;
                margin-left: 10%;
                margin-right: 10%;
            }
        </style>
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Button Group Variations</strong>
        </center>
        <br><br>
        <div class="container">
        <div>
            <strong>Equal Width:</strong><br>
            <div class="three ui buttons">
              <button class="ui red button">
                  Like
              </button>
              <button class="ui yellow button">
                  Share
              </button>
              <button class="ui purple button">
                  Subscribe
              </button>
            </div>
            <div class="two ui buttons">
              <button class="ui blue button">
                  Sell
              </button>
              <button class="ui green button">
                  Buy
              </button>
            </div>
        </div>
        <br>
        <div>
            <strong>Colored Buttons:</strong>
            <div class="ui green buttons">
              <button class="ui button">
                  Like
              </button>
              <button class="ui button">
                  Share
              </button>
              <button class="ui button">
                  Subscribe
              </button>
            </div>
        </div>
        <br>
        <div>
            <strong>Basic Buttons:</strong>
            <div class="ui basic buttons">
              <button class="ui button">
                  Like
              </button>
              <button class="ui button">
                  Share
              </button>
              <button class="ui button">
                  Subscribe
              </button>
            </div>
        </div>
        <br>
        <div>
            <strong>Group Sizes:</strong>
            <br>
            <div class="ui small blue buttons">
              <button class="ui button">
                  Small Like
              </button>
              <button class="ui button">
                  Small Share
              </button>
              <button class="ui button">
                  Small Subscribe
              </button>
            </div>
            <br><br>
            <div class="ui large green buttons">
              <button class="ui button">
                  large Like
              </button>
              <button class="ui button">
                  large Share
              </button>
              <button class="ui button">
                  large Subscribe
              </button>
            </div>
        </div>
        <br>
        </div>
    </body>
</html>


Output:

Semantic-UI Button Group Variations

Button Group Variations

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



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