Skip to content
Related Articles

Related Articles

Semantic-UI Button Groups

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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 offers categorized button group which allow to group buttons along the same line, horizontally or vertically. The buttons to be grouped are nested inside a <div> element.

Semantic UI Button Group classes:

  • buttons: This class is used to create a group of button.
  • icon buttons: This class is used to create a group of icon button.

Syntax:

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

Below example will illustrate the Semantic-UI Button Group:

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
        <style>
            button {
                width: 150px;
            }
            .container {
                width: 600px;
                margin-left: 15%;
            }
        </style>
    </head>
    <body>
        <center>
            <h1 class="ui green">Geeksforgeeks</h1>
            <strong>Semantic UI Button Group</strong>
        </center>
        <br><br>
        <div class="container">
        <strong>Buttons:</strong>
        <div class="ui buttons">
            <button class="ui inverted purple button">
                Trash
            </button>
            <button class="ui inverted green button">
                Subscribe
            </button>
            <button class="ui inverted red button">
                Unsubscribe
            </button>
        </div>
        <br><br>
        <strong>Icon Buttons:</strong>
        <div class="ui icon button">
            <button class="ui icon button">
              <i class="cloud icon"></i>
            </button>
            <button class="ui icon button">
              <i class="bed icon"></i>
            </button>
            <button class="ui icon button">
              <i class="fire icon"></i>
            </button>
        </div>
        </div>
    </body>
</html>


Output:

Semantic-UI Button Groups

Semantic-UI Button Groups


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!