Skip to content
Related Articles

Related Articles

Semantic-UI Button States

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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 the predefined CSS and jQuery to incorporate in different frameworks.

Semantic UI Button Group offers status of the button, if you want to create a like, subscribe and follow button in that case this kind of buttons is required.&

Semantic UI Button States Class:

  • active: This class is use to set the button status active.
  • disabled: This class is use to set the button status disabled.
  • loading: This class is use to set the button status loading.

Syntax:

<button class="ui "States-Class" button">...</button>

Below example will illustrate the Semantic-UI Button States:

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI</title>
    <link href=
    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 States</strong>
    </center>
    <br><br>
    <div class="container">
        <strong>Conditionals:</strong>
        <button class="ui active button">
            <i class="like icon"></i>
        Like</button>
        <button class="ui disabled button">
            <i class="user icon"></i>
            Subscribed
        </button>
        <button class="ui secondary loading button">
            Loading
        </button>
    </div>
</body>
</html>


Output: 

Semantic-UI Button States


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!