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...