Semantic-UI Button Mixed Group Variations

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"

        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>