Semantic-UI Icon Disabled State

Last Updated : 12 Feb, 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.

A Semantic UI Icon is a glyph used to represent something. Icons can be used to display special messages such as like button, danger, etc. The icons are general in meaning and hence widely used. The Semantic UI Icon Disabled state demonstrates that any option or link with which the Icon is linked is disabled. It fades the color of the icon.

Semantic-UI Icon Disabled State classes:

disabled: This class is used to make the icon disabled here.

Syntax:

<i class="... icon disabled">
</i>

The below example illustrates the Semantic-UI Statistics Variations Floated Variant:

Example: In the following example, we are toggling the class of code icon using the button element using the disabled class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <h1 style="color: green;"> 
              GeeksforGeeks 
            </h1> 
            <h2>Semantic-UI Icon Disabled State</h2> 
              
            <h4>Code</h4> 
            <i class="code huge circular icon" 
               id="codeIcon"></i> 
              
            <div> 
                <button class="ui button" 
                        onclick="toggleDisable()"> 
                  Enable/Disable Code Icon 
                </button> 
            </div> 
        </center> 
    </div> 
    <script> 
        function toggleDisable(){ 
            $("#codeIcon").toggleClass("disabled"); 
        } 
    </script> 
</body> 
  
</html>