Primer CSS Button with Icons
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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
Buttons help us to initiate an action such as submitting a form, navigating to another link, etc. Primer CSS Button with Icons is used to add an icon with the button. In this article, we will discuss Primer CSS Button with Icons.
Primer CSS Button with Icons Classes:
- btn: This class is used to create a basic default button.
- octicon: This class is used to add octicon icons.
Syntax:
<button class="btn mr-2" type="button">
SVG ICON
<span> ... </span>
</button>
Example 1: The following example demonstrates the Primer CSS Button with Icons.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Button with Icons </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Button with Icons </h3> <br>
<button class="btn-octicon mr-2" type="button">
<svg class="octicon" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
width="16" height="16" >
<path fill-rule="evenodd"
d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5
0 000-13zM0 8a8 8 0 1116 0A8 8 0 010
8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0
01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0
010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0
100-2 1 1 0 000 2z">
</path>
</svg>
</button>
<button class="btn-octicon mr-2" type="button">
<svg class="octicon" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
width="16" height="16" >
<path fill-rule="evenodd"
d="M8.22 1.754a.25.25 0 00-.44 0L1.698
13.132a.25.25 0 00.22.368h12.164a.25.25 0
00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234
2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0
0114.082 15H1.918a1.75 1.75 0
01-1.543-2.575L6.457 1.047zM9 11a1 1 0
11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0
00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z">
</path>
</svg>
</button>
</div>
</body>
</html>
Output:
Primer CSS Button with Icons
Example 2: The following example demonstrates the Primer CSS Button with Icons.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Button with Icons </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Button with Icons </h3> <br>
<button class="btn mr-2" type="button">
<svg class="octicon" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
width="16" height="16" >
<path fill-rule="evenodd"
d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5
0 000-13zM0 8a8 8 0 1116 0A8 8 0 010
8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0
01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0
010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0
100-2 1 1 0 000 2z">
</path>
</svg>
<span> GFG 1 </span>
</button>
<button class="btn btn-primary mr-2" type="button">
<svg class="octicon" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
width="16" height="16" >
<path fill-rule="evenodd"
d="M8.22 1.754a.25.25 0 00-.44 0L1.698
13.132a.25.25 0 00.22.368h12.164a.25.25 0
00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234
2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0
0114.082 15H1.918a1.75 1.75 0
01-1.543-2.575L6.457 1.047zM9 11a1 1 0
11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0
00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z">
</path>
</svg>
<span> GFG 2 </span>
</button>
</div>
</body>
</html>
Output:
Primer CSS Button with Icons
Reference: https://primer.style/css/components/buttons#button-with-icons
Similar Reads
Primer CSS Boxes with Icons 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
3 min read
Primer CSS Button with Counts 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
Pure CSS Buttons Icons Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. To make the buttons more user-friendly we can put icons on the buttons. Pure CSS does not ship with the icons, there are so many icon packages available tha
2 min read
Primer CSS Alerts With Icon 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 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 e
4 min read
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