Open In App

Semantic-UI Button Groups

Last Updated : 22 Apr, 2022
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 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



Previous Article
Next Article

Similar Reads

Semantic-UI Step Groups
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. It consists of pre-built semantic components with the help of which one can create beautiful and responsive layouts. A step shows the c
3 min read
Semantic-UI Image Groups
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 provides us with a very easy way to style images. It offers images in different types like a normal image and image link an
2 min read
Semantic-UI Label Groups
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. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components. A
3 min read
Semantic-UI Segment Groups
Semantic UI is an open-source framework that is used to create the best CSS user interfaces. With this framework, you can create beautiful, responsive layouts for your web application just by using simple HTML. In semantic UI, a group of segments can be added together to make a group-like structure. Semantic UI Segments Group Classes: segments- Thi
4 min read
Bootstrap 4 | Button Groups
Bootstrap offers classes which allow to group buttons along the same line, horizontally or vertically. The buttons to be grouped are nested inside a &lt;div&gt; element with the class .btn-group. Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button groups. Example: C/C++ Code &lt;!DOCTYPE html&gt;
4 min read
What are Button Groups in Bootstrap ?
"Button Groups" in Bootstrap is a class of name "btn-group" which is used to create a series of buttons in groups (without spaces) vertically or horizontally. Syntax: This is the basic syntax of the button group class where each button has its own class of "btn". &lt;div class="btn-group"&gt; &lt;button type="button" class="btn"&gt;Click&lt;/button
3 min read
How do we create large button groups in Bootstrap ?
Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. It is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. It uses different types of classes to make responsive websites. Bootstrap 5 is the major release of B
5 min read
Pure CSS Button Groups
Buttons are one of the most common UI elements. To create buttons group use "pure-button-group" class and add the buttons as number as you want with the help of "pure-button" class. You can also make the button active by using "pure-button-active" class. Pure CSS Button Groups Classes: pure-button-group: This class is used to create buttons group.
1 min read
Primer CSS Button Groups
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach ensures that our styles are consistent and interope
4 min read
Blaze UI Button Groups
Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it
2 min read