Open In App

Semantic-UI Button Group Sizes Group Variations

Improve
Improve
Like Article
Like
Save
Share
Report

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



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