Spectre Button Group

Last Updated : 07 Feb, 2023

In this article, we will know Spectre Button Group, its various available classes & will understand it through the examples. The Button is an important feature of any website or in any app. Sometimes you will need to categorize the buttons. The Spectre Button group class is used to set the category of the button.

Button Group Class:

btn-group: If you want to place the buttons as a group without any margin then you can use this class.
btn-group-block: If you want to place the buttons as a group with any margin then you can use this class.

The below example illustrates the Button Groups in Spectre.

Example: In this example, we will see the different groups of buttons.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE CSS Buttons Class</title>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1> 
        <strong>SPECTRE Button Groups Class</strong>
        <br>
        <div class="btn-group">
            <button class="btn btn-primary">
                Primary Button
            </button>
            <button class="btn btn-success">
                 Success Button
            </button>
            <button class="btn btn-error">
                 Error Button
            </button>
        </div>
        <br><br>
        <div class="btn-group-block">
            <button class="btn btn-primary">
                Primary Button
            </button>
            <button class="btn btn-success">
                 Success Button
            </button>
            <button class="btn btn-error">
                 Error Button
            </button>
        </div>
        <br><br>
        <div class="btn-group btn-group-block">
            <button class="btn btn-primary">
                Primary Button
            </button>
            <button class="btn btn-success">
                 Success Button
            </button>
            <button class="btn btn-error">
                 Error Button
            </button>
        </div>
        
    </center>
</body>

</html>

Output:

Reference: https://picturepan2.github.io/spectre/elements/buttons.html#buttons-groups

React Suite Button group

skyridetim

Improve

Article Tags :

Spectre Button Group

Similar Reads

Thank You!

What kind of Experience do you want to share?