Angular PrimeNG Button Component

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