Semantic-UI Button Toggle Variations

Last Updated : 07 Mar, 2022

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=
"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>
    <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 :

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Button Toggle Variations</title>
    <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>
    <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:

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

Semantic-UI Button Toggle Variations

namankedia

Improve

Article Tags :

Semantic-UI Button Toggle Variations

Similar Reads

Thank You!

What kind of Experience do you want to share?