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=
</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=
</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=
</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>
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...