Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Semantic-UI Button Mixed Group Variations

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


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

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


<!DOCTYPE html>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
            <strong>Semantic UI Button Variations Mixed Group</strong>
        <strong>Labeled icon button:</strong>
        <div class="ui green buttons">
          <button class="ui labeled icon button">
            <i class="left chevron icon"></i>
          <button class="ui button">
            <i class="play icon"></i>
          <button class="ui right labeled icon button">
            <i class="right chevron icon"></i>


Semantic-UI Button Variations Mixed Group

Semantic-UI Button Variations Mixed Group


My Personal Notes arrow_drop_up
Last Updated : 08 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials