Primer CSS Button Types

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. Primer CSS provides us with various types of buttons. This functionality is known as Button Types in Primer CSS.

Primer CSS Button Types Classes:

btn: This class is used to create a simple button for general page actions. It is known as the default button.
btn-primary: This class is used to create a primary button that is green in color and is used to indicate the primary action on a page.
btn-outline: This class is used to create an outline button that downplays an action and appears like links.
btn-danger: This class is used to create a danger button that is red in color.

Syntax:

<button class="btn btn-primary" type="button">
    ...
</button>

The syntax for the other classes is the same except for the name of the class which will change.

Example 1: The following example demonstrates the use of the btn and the btn-primary classes in order to create a default button and a primary button respectively.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Button Types </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 Types </h3> 
    </div> 
    <br> 
  
    <!--Default Button-->
    <button class="btn" type="button"> 
        Default Button 
    </button> 
    <button class="btn" type="button"> 
        Default Button 2 
    </button> 
  
    <!--Primary Button-->
    <button class="btn btn-primary" type="button"> 
        Primary Button 
    </button> 
    <button class="btn btn-primary" type="button"> 
        Primary Button 2 
    </button> 
</body> 
  
</html>

Output:

Example 2: The following example demonstrates the use of the btn-outline and the btn-danger classes in order to create an outline button and a danger button respectively. When you hover on the online button or on the danger button, the entire button will become blue or red respectively.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Button Types </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
  
    <style> 
        body { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="text-left"> 
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1> 
        <h3> Primer CSS Button Types </h3> 
    </div> 
    <br> 
  
    <!--Outline Button-->
    <button class="btn btn-outline" type="button"> 
        Outline Button 
    </button> 
    <button class="btn btn-outline" type="button"> 
        Outline Button 2 
    </button> 
      
    <!--Danger Button-->
    <button class="btn btn-danger" type="button"> 
        Danger Button 
    </button> 
    <button class="btn btn-danger" type="button"> 
        Danger Button 2 
    </button> 
</body> 
  
</html>