Semantic-UI Button Disabled States

Last Updated : 10 Mar, 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.

Semantic-UI Button Disabled States are is one of the states from 3 states of Semantic-UI Button States. This class is used to set the button status active.

Semantic-UI Button Disabled States Class:

disabled: This class is used to set the button status disabled.

Syntax:

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

Below example illustrate the Semantic-UI Button Disabled States:

Example:

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 {
            margin-left: 10%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 class="ui green">
            Geeksforgeeks
        </h1>
         
        <strong>
            Semantic-UI Button Disabled States
        </strong>
    </center>
    <br><br>
     
    <div class="container">
        <strong>Button Disabled States:</strong>
        <button class="ui disabled button">
            <i class="like icon"></i>
            Like
        </button>
        <button class="ui disabled button">
            <i class="share icon"></i>
            share
        </button>
        <button class="ui disabled button">
            <i class="trash icon"></i>
            trash
        </button>
    </div>
</body>
 
</html>

Output:

Semantic-UI Button Disabled States

Example 2:

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: 150px;
         }
         .container {
         margin-left: 10%;
         }
      </style>
   </head>
   <body>
      <center>
         <h1 class="ui green">Geeksforgeeks</h1>
         <strong>Semantic-UI Button Disabled States</strong>
      </center>
      <br><br>
      <div class="container">
         <strong>Basic Button Disabled States:</strong>
         <button class="ui disabled basic button">
         <i class="like icon"></i>
         Like
         </button>
         <button class="ui disabled basic button">
         <i class="share icon"></i>
         share
         </button>
         <button class="ui disabled basic button">
         <i class="trash icon"></i>
         trash
         </button>
      </div>
   </body>
</html>