Primer CSS Button 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 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.

Output:

👁 Image

Example 2: The following example demonstrates the Primer CSS Button with Icons.

Output:

👁 Image

Reference: https://primer.style/#button-with-icons