Open In App

Semantic-UI Button Mixed 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 discuss the Mixed Group. Mixed Group can be formatted to use multiple button types together, here we can create multiple types of buttons that will follow a fixed width of each button will be same inside of that group.

Semantic-UI Button Variations Mixed Group Class:

  • buttons: This class is used to create a mixed buttons group.

Syntax:

<div class="ui buttons">
    <button class="labeled icon">
        <i class="icon"></i>
            ...
    </button>
</div>

Example: Below example illustrate the Semantic-UI Button Variations Mixed Group:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks:</h1>
            <strong>Semantic UI Button Variations Mixed Group</strong>
        </center>
        <br><br>
        <strong>Labeled icon button:</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>
          </button>
          <button class="ui right labeled icon button">
            Next
            <i class="right chevron icon"></i>
          </button>
        </div>
    </body>
</html>


Output:

Semantic-UI Button Variations Mixed Group

Semantic-UI Button Variations Mixed Group

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



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