Angular PrimeNG Button Component - GeeksforGeeks

11 Sep, 2021
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease.  In this article, we will know how to use the Button Component in Angular PrimeNG. We will also learn about the properties, styling along with their syntaxes that will be used in the code. 
Button component: It is used to make a standard button that will indicate a possible user action.
Properties of pButton:
label: It is the text of the button. It is of string data type & the default value is null.  
icon: It is the name of the icon. It is of string data type & the default value is null.
iconPos: It specifies the position of the icon, the valid values are “left” and “right”. It is of string type & the default value is left.
loading: It specifies whether the button is in a loading state. It is of boolean data type & the default value is false
loadingIcon: It is an icon to display in the loading state. It is of string type & the default value is pi pi-spinner pi-spin.
Properties of p-button:
type: It specifies the types of the button. It is of string type & the default value is null.  
label: It specifies the text of the button. It is of string type & the default value is null.  
icon: It specifies the name of the icon. It is of string type & the default value is null.
iconPos: It specifies the position of the icon, the valid values are “left” and “right”. It is of string type & the default value is left.
badge: It specifies the badge value. It is of string type & the default value is null.
badgeClass: It specifies the badge style class. It is of string type & the default value is null.
loading: It specifies whether the button is in a loading state. It is of boolean type & the default value is false.
loadingIcon: It specifies the icon to display in the loading state. It is of string type & the default value is pi pi-spinner pi-spin.
disabled: It specifies the component should be disabled.  It is of boolean type & the default value is false.
style: It specifies the inline style of the element. It is of string type & the default value is null.
styleClass: It specifies the style class of the element. It is of string type & the default value is null.
onClick: It is used to callback to execute when the button is clicked. It is of the event type & the default value is null.
onFocus: It is used to callback to execute when the button is focused. It is of the event type & the default value is null.
onBlur: It is used to callback to execute when the button loses focus. It is of the event type & the default value is null.
 
Styling:
p-button: It is the button element.
p-button-icon: It is the icon element.
p-button-label: It is the label element of the button.
Creating Angular application & module installation:
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: It will look like the following:
Example 1: This is the basic example that illustrates how to use Button Component. 
app.component.html
<h2>GeeksforGeeks</h2><h5>PrimeNG Button Component</h5><button pButton pRipple label="Primary"   class="p-button-raised"></button><button  pButton  pRipple  label="Secondary"  class="p-button-raised p-button-secondary"></button><button  pButton  pRipple  label="Success"  class="p-button-raised p-button-success"></button><button  pButton  pRipple  label="Info"  class="p-button-raised p-button-info"></button><button  pButton  pRipple  label="Warning"  class="p-button-raised p-button-warning"></button><button  pButton  pRipple  label="Danger"  class="p-button-raised p-button-danger"></button>
app.component.ts
import { Component } from '@angular/core';  @Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss']})export class AppComponent {}
 
app.module.ts
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { BrowserAnimationsModule }     from "@angular/platform-browser/animations";  import { AppComponent } from "./app.component";import { ButtonModule } from "primeng/button";import { RippleModule } from "primeng/ripple";  @NgModule({  imports: [BrowserModule,               BrowserAnimationsModule,             ButtonModule, RippleModule],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}
Output:
Example 2: In this example, we will know how to use the various available class property in the Button Component.
app.component.html
<h2>GeeksforGeeks</h2><h5>PrimeNG Button Component</h5><h6>Small Outlined, Raised & Rounded Button</h6><button  pButton  pRipple  label="Small button"  class="p-button-raised p-button-sm p-button-rounded p-button-outlined"></button><h6>Normal Raised & Rounded Button</h6><button  pButton  pRipple  label="Normal button"  class="p-button-raised p-button-success p-button-rounded"></button><h6>Large,Text, Raised & Rounded Button</h6><button  pButton  pRipple  label="Large button"  class="p-button-text p-button-raised p-button-warning p-button-lg p-button-rounded"></button>
app.component.ts
import { Component } from "@angular/core";  @Component({  selector: "my-app",  templateUrl: "./app.component.html",  styleUrls: ["./app.component.scss"],})export class AppComponent {}
app.module.ts
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { BrowserAnimationsModule }         from "@angular/platform-browser/animations";  import { AppComponent } from "./app.component";import { ButtonModule } from "primeng/button";import { RippleModule } from "primeng/ripple";  @NgModule({  imports: [BrowserModule,               BrowserAnimationsModule,             ButtonModule, RippleModule],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}
Output:
Reference: https://primefaces.org/primeng/showcase/#/button
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?