Semantic-UI Button Basic Buttons Group Variations

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 discuss the Basic Buttons. Basic Buttons can have can be less pronounced, here we can create a simple button group that will follow a fixed basic type button, each button will be the same inside of that group.

Semantic-UI Button Variations Basic Buttons Class:

basic: This class is used to create a basic group of buttons.

Syntax:

<div class="ui basic buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
      <div class="ui button">Three</div>
</div>

Example: In this example, we will use the basis button. Also, we will design three types of basic buttons, normal, vertical, and colored. You can mix up the other classes also to play with the buttons.

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 Basic Buttons</strong>
    </center>
    <br><br>
    <strong>Basic Buttons:</strong>
    <br>
    <div class="ui basic buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
    </div>
    <br>
    <strong>Vertical basic buttons:</strong>
    <br>
    <div class="ui vertical basic buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
    </div>
    <br>
    <strong>Coloured basic buttons:</strong>
    <br>
    <div class="ui green basic 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 the basis button with an icon attached. Also, we will design three types of basic buttons, normal, vertical, and colored. You can mix up the other classes also to play with the buttons.

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 Basic Buttons</strong>
    </center>
    <br><br>
    <strong>Basic icon Buttons:</strong>
    <div class="ui 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>Vertical Basic icon Buttons:</strong>
    <div class="ui vertical 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>Coloured Basic icon Buttons:</strong>
    <div class="ui basic red 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>