Open In App

Semantic-UI Button Toggle Variations

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a Bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI has a bunch of components for user interface design. One of them is “Buttons”. Buttons are used to enable users to perform different actions through a click action. Users can click as per their choice. There are different Variations of Buttons based on their shape and style. One of them is the toggle Variation Semantic UI Button Toggle Variation is used to make the Button in the form of a toggle that can be used by the user to select a true or false value. It adds a different look than the default Button.

Semantic-UI Button Toggle Variation Class:

  • toggle: This class is used to display the Button in the form of a toggle.

Syntax: 

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

 These examples demonstrate the button toggle variation using the toggle class.

Example 1:

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <br /><br />
    <div class="ui container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
        <b>
            <p>Semantic UI Button Toggle Variation</p>
        </b>
        <hr>
        <br />
        <strong>Toggle button: </strong>
        <br /><br />
        <button class="ui toggle button"
                id="suscribe">
          Toggle OFF
       </button>
        <script>
            $('#suscribe').click(function () {
                $(this).toggleClass('active');
                if($(this).hasClass('active')){
                    $(this).text("Toggle ON");
                }
                else {
                    $(this).text("Toggle OFF");
                }
            });
        </script>
    </div>
</body>
</html>


Output :

Semantic-UI Button Toggle Variations

Semantic-UI Button Toggle Variations

Example 2: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Button Toggle Variations</title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <br /><br />
    <div class="ui container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
        <b>
            <p>Semantic UI Button Toggle Variation</p>
        </b>
        <hr>
        <br />
        <strong>Toggle Button:</strong>
        <br /><br />
        <button class="ui toggle button" id="suscribe">
             Subscribed to GFG weekly newsletters
             </button>
        <script>
            $('#suscribe').click(function () {
                $(this).toggleClass('active');
                if($(this).hasClass('active')){
                    $(this).text("Subscribed to GFG weekly newsletters");
                }
                else {
                    $(this).text("Subscribe to GFG weekly newsletters");
                }
            });
        </script>
    </div>
</body>
  
</html>


Output:

Semantic-UI Button Toggle Variations

Semantic-UI Button Toggle Variations

Reference: https://semantic-ui.com/elements/button.html#toggle



Last Updated : 07 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads