Angular PrimeNG Button Severities 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 see the Button Severities Component in Angular PrimeNG.

A Button is generally used for carrying out some action when clicked. Buttons in the PrimeNG library come in different colors to indicate the severity of that action being carried out through the click event.

Angular PrimeNG Button Severities Classes:

• p-button: It displays the button with the default primary color.
• p-button-secondary: It displays the button with a secondary color.
• p-button-success: It displays the button with a green color.
• p-button-info: It displays the button with a blue color.
• p-button-warning: It displays the button with a yellow color.
• p-button-help: It displays the button with a purple color.
• p-button-danger: It displays the button with a red color.

Syntax:

<button pButton type="button" class="Severities Class"></button>

Creating Angular application & Module Installation:

Step 1: To create an angular app, you need to install the angular command line interface through the npm command:

npm install -g angular-cli

Step 2: Now, we will create an angular project:

ng new project_name

Step 3: After creating your angular project, move into the folder to perform different operations:

cd project_name

Step 4: After creating the Angular application, Install the required module using the following command:

npm install primeng --save
npm install primeicons --save

Project Structure: After successful installation, the following project structure will appear:

Project Structure

• Step to Run Application: Run the application using the following command from the root directory of the project:

ng serve --open

Example 1: This example describes the use of the different Button Severity Components in Angular PrimeNG.

• app.component.html

HTML

<div style="margin:100px; text-align: center;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Button Severities Component</h3>
    <button pButton type="button"
                    label="Primary"
                    class="p-button-lg p-button-raised
                           p-button-outlined">
    </button>
    <button pButton type="button"
                    label="Secondary"
                    class="p-button-lg p-button-raised
                           p-button-outlined p-button-secondary">
    </button>
    <button pButton type="button"
                    label="Success"
                    class="p-button-lg p-button-raised
                           p-button-outlined p-button-success">
    </button>
    <button pButton type="button"
                    label="Info"
                    class="p-button-lg p-button-raised
                           p-button-outlined p-button-info">
    </button>
    <button pButton type="button"
                    label="Warning"
                    class="p-button-lg p-button-raised
                           p-button-outlined p-button-warning">
    </button>
    <button pButton type="button"
                    label="Help"
                    class="p-button-lg p-button-raised
                           p-button-outlined p-button-help">
    </button>
    <button pButton type="button"
                    label="Danger"
                    class="p-button-lg p-button-raised
                           p-button-outlined p-button-danger">
    </button>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent { }

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonModule } from "primeng/button";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ButtonModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: This is another example that describes the use of the different Button Severity Components in Angular PrimeNG.

• app.component.html

HTML

<div style="margin:100px; text-align: center;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Button Severities Component</h3>
    <button pButton type="button"
                    label="Success"
                    class="p-button-lg p-button-rounded
                           p-button-success">
    </button>
    <button pButton type="button"
                    label="Warning"
                    class="p-button-lg p-button-rounded
                           p-button-warning">
    </button>
    <button pButton type="button"
                    label="Help"
                    class="p-button-lg p-button-rounded
                           p-button-help">
    </button>
    <button pButton type="button"
                    label="Danger"
                    class="p-button-lg p-button-rounded
                           p-button-danger">
    </button>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent { }

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonModule } from "primeng/button";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ButtonModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/button