Primer CSS Button States

Last Updated : 24 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. 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

Primer CSS Button States

shreyasnaphad

Improve

Article Tags :

Primer CSS Button States

Similar Reads

Thank You!

What kind of Experience do you want to share?