Primer CSS Button Groups
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" >w3wiki</ 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" > w3wiki </ 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" > w3wiki </ 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
Contact Us