Home
TailwindFlex
Button group

Button group

Add active class to clicked button using JavaScript

This tailwind example is contributed by TailwindFlex, on 24-Sep-2022. Component is made with Tailwind CSS v3. It is responsive.

Button Toggle switch

Author TailwindFlex

9.8k

Fork Fullscreen

<div class="flex justify-center m-r-auto bg-violet-600" id="buttons_container">
    <button class="text-gray-200 px-6 py-2 text-xl font-mono border-r-2 hover:text-slate-50"
        onclick="toggle(0)">
        sm
    </button>
    <button class="text-gray-200 px-6 py-2 text-xl font-mono border-r-2 hover:text-slate-50"
        onclick="toggle(1)">
        md
    </button>
    <button class="text-gray-200 px-6 py-2 text-xl font-mono border-r-2 hover:text-slate-50"
        onclick="toggle(2)">
        lg
    </button>
    <button class="text-gray-200 px-6 py-2 text-xl font-mono hover:text-slate-50"
        onclick="toggle(3)">
        xl
    </button>
</div>
<script>
    function toggle(index) {
        var buttons = document.getElementById('buttons_container').children;
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].classList.remove('text-white');
            buttons[i].classList.remove('underline');
        }
        buttons[index].classList.add('text-white');
        buttons[index].classList.add('underline');
    }
</script>

Related Examples