Skip to content
Related Articles

Related Articles

Semantic-UI Button Group Sizes Group Variations

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 08 Feb, 2022

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

In this article, we will disuse the Group sizes buttons. Group sizes can have a shared size, here we can create a simple button group that will follow a fixed size, each button size will be the same inside of that group.

Semantic-UI Button Variation Group Sizes Class:

  • small: This class is used to create small sizes buttons.
  • medium: This class is used to create a medium sizes button which is the default value.
  • large: This class is used to create large sizes buttons.

Syntax:

<div class="ui buttons Button-Variation-Group-Sizes">
    <button class="ui button">...</button>
    <button class="ui button">...</button>
      ...
</div>

Example 1: In this example, we will use different sizes on normal buttons.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
          rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <strong>Semantic UI Button Variations Group Sizes</strong>
    </center>
    <br><br>
    <strong>Group sizes: Small</strong>
    <br>
    <div class="small ui buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
    </div>
    <br>
    <strong>Group sizes: Medium</strong>
    <br>
    <div class="medium ui buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
    </div>
    <br>
    <strong>Group sizes: Large</strong>
    <br>
    <div class="large ui buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we will use different sizes on icon buttons.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
          rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <strong>Semantic UI Button Variations Group Sizes</strong>
    </center>
    <br><br>
    <strong>Group Sizes: Small</strong>
    <div class="ui small basic icon buttons">
        <button class="ui button">Like
            <i class="like icon"></i>
        </button>
        <button class="ui button">Share
            <i class="share icon"></i>
        </button>
        <button class="ui button">Subscribe
            <i class="user icon"></i>
        </button>
    </div>
    <br><br>
    <strong>Group Sizes: Medium</strong>
    <div class="ui medium basic icon buttons">
        <button class="ui button">Like
            <i class="like icon"></i>
        </button>
        <button class="ui button">Share
            <i class="share icon"></i>
        </button>
        <button class="ui button">Subscribe
            <i class="user icon"></i>
        </button>
    </div>
    <br><br>
    <strong>Group Sizes: Large</strong>
    <div class="ui large basic icon buttons">
        <button class="ui button">Like
            <i class="like icon"></i>
        </button>
        <button class="ui button">Share
            <i class="share icon"></i>
        </button>
        <button class="ui button">Subscribe
            <i class="user icon"></i>
        </button>
    </div>
</body>
 
</html>

Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!