Angular PrimeNG Button Styling

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will be seeing the Button Styling in Angular PrimeNG.

The Button component in PrimeNG is used to carry out an action when it is clicked. There are 3 structural style classes for the button component: p-button, p-button-icon, and p-button-label. These classes will be applied to the button, the icon, and the label respectively, and can be used to change the properties of these elements according to our needs.

Angular PrimeNG Button Styling Properties:

• label: The label property of the button is used to set its text.
• icon: The icon property is used to set the icon for the button.

Angular PrimeNG Button Styling Classes:

• p-button: This class is applied to the button by the PrimeNG library.
• p-button-icon: This class is applied to the button icon by the PrimeNG library.
• p-button-label: This class is applied to the button label by the PrimeNG library.

Syntax:

<button pButton type="button" label="..." icon="..."></button>

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we used the p-button-label class to change the font-size of the Button label.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Button Styling</h3>
</div>
<div class="example-container">
    <button pButton type="button"
            label="Hello"
            icon="pi pi-check">
    </button>
</div>

app.component.css

div.header,
div.example-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header h2 {
  margin-bottom: 0;
  color: green;
}

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
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";

@NgModule({
  declarations: [AppComponent],
  imports: [ButtonModule,
              BrowserModule,
              BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

styles.css

button .p-button-label {
    font-size: 40px;
}

• Run the below command:

ng serve --open

Output:

Example 2: In this example, we used the p-button-icon class to change the font-size and the color of the button icon.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Button Styling</h3>
</div>
<div class="example-container">
    <button pButton type="button"
            label="Hello"
            icon="pi pi-check">
    </button>
</div>

app.component.css

div.header,
div.example-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header h2 {
  margin-bottom: 0;
  color: green;
}

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
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";

@NgModule({
  declarations: [AppComponent],
  imports: [ButtonModule,
              BrowserModule,
              BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

styles.css

button .p-button-icon {
    font-size: 30px;
    color: red;
}

Output:

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