Primer CSS Button Groups

Last Updated : 20 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach ensures that our styles are consistent and interoperable with each other. It features a highly composable spacing scale, customizable typography, and meaningful colors. It is highly reusable and flexible and is created with GitHub’s design system.

A button is an important component in any website which is used for generating events whenever the user clicks the button. If we have a collection of buttons that have to be attached to one another, Button Groups is a component that is provided to us by the Primer CSS to make a group of buttons.

Primer CSS Button Groups Classes:

BtnGroup-item btn: This class is used to create a simple button group where the buttons will be rounded and spaced automatically.
BtnGroup-item btn btn-sm: This class is used to create a button group that is smaller in size.
BtnGroup-parent: This class is used for parent elements, such as <form>s or <details>s, within BtnGroup class.

Syntax:

<div class="BtnGroup">
  <button class="BtnGroup-item btn btn-sm" type="button">
    ...
  </button>
  ...
</div

Note: The syntax for the other classes is the same except for the name of the class which will change.

Example 1: The following example will demonstrate the use of the BtnGroup-item btn class in order to create a simple button group.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Primer CSS Button Groups </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <div class="text-left">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3> Primer CSS Button Groups </h3>
    </div>
    <br>
    <div class="BtnGroup mb-3">
        <button class="BtnGroup-item btn" type="button">
            Button 1
        </button>
        <button class="BtnGroup-item btn" type="button">
            Button 2
        </button>
        <button class="BtnGroup-item btn btn-danger" type="button">
            Danger Button
        </button>
    </div>

    <div class="BtnGroup d-block mb-3 ml-0">
        <button class="BtnGroup-item btn btn-outline" type="button">
            Button 1
        </button>
        <button class="BtnGroup-item btn btn-outline" type="button">
            Button 2
        </button>
        <button class="BtnGroup-item btn btn-primary" type="button">
            Primary Button
        </button>
    </div>
</body>

</html>

Output:

Example 2: The following example will demonstrate the use of the BtnGroup-item btn btn-sm class in order to create buttons of small size in a button group.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Primer CSS Button Groups </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <div class="text-left">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
        <h3> Primer CSS Button Groups </h3>
    </div>
    <br>
    <div class="BtnGroup mb-3">
        <button class="BtnGroup-item btn btn-sm" type="button">
            Small Button 1
        </button>
        <button class="BtnGroup-item btn btn-sm" type="button">
            Small Button 2
        </button>
        <button class="BtnGroup-item btn  
            btn-sm btn-danger" type="button">
            Small Danger Button
        </button>
    </div>

    <div class="BtnGroup d-block mb-3 ml-0">
        <button class="BtnGroup-item btn 
            btn-sm btn-outline" type="button">
            Small Button 1
        </button>
        <button class="BtnGroup-item btn 
            btn-sm btn-outline" type="button">
            Small Button 2
        </button>
        <button class="BtnGroup-item btn 
            btn-sm btn-primary" type="button">
            Small Primary Button
        </button>
    </div>
</body>

</html>

Output:

Example 3: The following example will demonstrate the use of BtnGroup-parent class in order to create a parent element such as a form.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Primer CSS Button Groups </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <div class="text-left">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
        <h3> Primer CSS Button Groups </h3>
    </div>
    <br>
    <div class="BtnGroup mb-3">
        <button class="BtnGroup-item btn 
            btn-sm" type="button">
            Button 1
        </button>

        <!--BtnGroup-parent-->
        <form class="BtnGroup-parent">
            <button class="BtnGroup-item 
                btn btn-sm" type="button">
                This is inside a form
            </button>
        </form>
        <button class="BtnGroup-item btn 
            btn-sm btn-danger" type="button">
            Small Danger Button
        </button>
    </div>

    <div class="BtnGroup d-block mb-3 ml-0">
        <button class="BtnGroup-item btn 
            btn-sm btn-outline" type="button">
            Small Button 1
        </button>
        <button class="BtnGroup-item btn 
            btn-sm btn-outline" type="button">
            Small Button 2
        </button>
        <form class="BtnGroup-parent">
            <button class="BtnGroup-item btn 
                btn-sm btn-primary" type="button">
                This is also inside a form
            </button>
        </form>
    </div>
</body>

</html>

Output:

Reference: https://primer.style/css/components/buttons

Primer CSS Form Groups

shreyasnaphad

Improve

Article Tags :

Primer CSS Button Groups

Similar Reads

Thank You!

What kind of Experience do you want to share?