Semantic-UI Button Types

Last Updated : 22 Apr, 2022

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

In this article, we will learn about the different kinds of buttons. The button type is used to specify the type of button. There are 8 types of buttons in Semantics UI.

Button Types:

Button: It is used for a standard button.
Basic: It is used for a normal button.
Emphasis: We can format buttons to show different levels of emphasis.
Animated: It is used to animate buttons.
Labeled: It is used to add a label to our button.
Icon: It is used to make a button as an icon.
Labeled Icon: It is used to make a button with a labeled icon
Inverted: It is used to make a button that can appear on a dark background.

Syntax:

<button class="ui button">...</button>

Example 1: The different buttons are implemented. Refer to the output for better understanding.

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" />
        <style>
            button {
                width: 170px;
            }
            .container {
                width: 600px;
                margin-left: 10%;
            }
        </style>
    </head>
    <body>
        <center>
            <h1 style="color:green">GeeksforGeeks</h1>
            <strong>Semantic UI Button Types</strong>
        </center>
        <br><br>
        <div class="container">
        <div>
            <strong>Button:</strong>
            <button class="ui button">Trash</button>
            <button class="ui green button">Subscribe</button>
            <button class="ui red button">Unsubscribe</button>
        </div>
        <br>
        <div>
            <strong>Basic:</strong>
            <button class="ui basic button">
                <i class="icon user"></i>
                Add Friend
            </button>
            <button class="ui basic button">
                <i class="icon plus"></i>
                Follow
            </button>
            <button class="ui basic button">
                <i class="icon minus"></i>
                Un Follow
            </button>
        </div>
        <br>
        <div>
            <strong>Emphasis:</strong>
            <button class="ui primary button">Save</button>
            <button class="ui secondary button">Delete</button>
        </div>
        <br>
        <div>
            <strong>Animated:</strong>
            <div class="ui vertical animated button">
                <div class="hidden content">Shop</div>
                <div class="visible content">
                  <i class="shop icon"></i>
                </div>
            </div>
            <div class="ui vertical animated button">
                <div class="hidden content">Setting</div>
                <div class="visible content">
                  <i class="setting icon"></i>
                </div>
            </div>
        </div>
        </div>
    </body>
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>
    <head>        
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
        <style>
            button {
                width: 150px;
            }
            .container {
                width: 600px;
                margin-left: 15%;
            }
        </style>
    </head>
    <body>
        <center>
            <h1 class="ui green">GeeksforGeeks</h1>
            <strong>Semantic UI Button Types</strong>
        </center>
        <br><br>
        <div class="container">
        <div>
            <strong>Inverted:</strong>
            <button class="ui inverted purple button">Trash</button>
            <button class="ui inverted green button">Subscribe</button>
            <button class="ui inverted red button">Unsubscribe</button>
        </div>
        <br>
        <div>
            <strong>Labeled Icon:</strong>
            <button class="ui left labeled icon button">
              <i class="left arrow icon"></i>
              Previous
            </button>
            <button class="ui labeled icon button">
              <i class="pause icon"></i>
              Pause
            </button>
            <button class="ui right labeled icon button">
              <i class="right arrow icon"></i>
              Next
            </button>
        </div>
        <br>
        <div>
            <strong>Icon:</strong>
            <button class="ui icon blue button">
              <i class="cloud icon"></i>
            </button>
            <button class="ui icon button">
              <i class="bed icon"></i>
            </button>
            <button class="ui icon yellow button">
              <i class="fire icon"></i>
            </button>
        </div>
        <br>
        <div>
            <strong>Labeled:</strong>
            <div class="ui labeled button" tabindex="0">
              <div class="ui red button">
                <i class="heart icon"></i> Like
              </div>
              <a class="ui basic left pointing label">
                2,048
              </a>
            </div>
            <div class="ui left labeled button">
              <a class="ui basic right pointing label">
                2,048
              </a>
              <div class="ui button">
                <i class="user icon"></i>Follower
              </div>
            </div>
            <div class="ui left labeled button">
              <a class="ui basic right pointing label">
                1,048
              </a>
              <div class="ui icon blue button">
                <i class="fork icon"></i>
              </div>
            </div>
        </div>
        </div>
    </body>
</html>