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. Primer CSS provides us with various states of buttons. This functionality is known as the Button States in Primer CSS.
Primer CSS Button States Classes:
- btn: This class is used to create a simple button for general page actions. It is known as the default button.
- aria-selected="true": This attribute is used to create a button that is in the selected state.
- aria-disabled="true": This attribute is used to create a button that is in the disabled state.
Syntax:
<button class="btn" type="button" aria-selected="true">
...
</button>
The above syntax is for a selected button. In order to create a disabled button replaced aria-selected="true" with aria-disabled="true".
Example 1: The following example demonstrates the use of the aria-selected="true" attribute in order to create a button having a selected state.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Button States </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 States </h3>
</div>
<br>
<div class="BtnGroup">
<button class="BtnGroup-item btn" type="button">
Button
</button>
<button class="BtnGroup-item btn" type="button"
aria-selected="true">
<!--Select State-->
Selected Button
</button>
<button class="BtnGroup-item btn " type="button">
Button
</button>
<button class="BtnGroup-item btn" type="button"
aria-selected="true">
Selected Button
</button>
</div>
</body>
</html>
Output:
Example 2: The following example demonstrates the use of the aria-disabled="true" attribute in order to create a button having a disabled state.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Button States </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 States </h3>
</div>
<br>
<div class="BtnGroup">
<button class="BtnGroup-item btn" type="button">
Button
</button>
<button class="BtnGroup-item btn" type="button"
aria-disabled="true">
<!--Disabled State-->
Disabled Button
</button>
<button class="BtnGroup-item btn " type="button">
Button
</button>
<button class="BtnGroup-item btn" type="button"
aria-disabled="true">
Disabled Button
</button>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/components/buttons
Similar Reads
Primer CSS Button Types 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 e
3 min read
Primer CSS States 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Buttons 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Buttons 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Button Variations 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 highly reusable and flexible. It is created with GitHub’s design system. Buttons are used to define an action that can be per
2 min read
Spectre Button States The button is an important feature of any website or in any app. The Spectre Button state class is used to define the states of the button. Button States Class: active: This class is used to show that the button is active which is the default.disabled: This class is used to show that the button is d
1 min read