Angular PrimeNG Button Sizes

Angular PrimeNG is an open-source library that consists 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 Angular PrimeNG Button Sizes.

A Button is generally used for carrying out some action when clicked. Buttons in the PrimeNG library come in different sizes. In addition to the default size, two more sizes are available: small and large.

Angular PrimeNG Button Sizes Styling:

• p-button-sm: This class is used to make the size of the button smaller.
• p-button: This class sets the size of the button to regular size.
• p-button-lg: This class is used to make the size of the button larger.

Syntax:

<button pButton 
    type="button" 
    label=" ... " 
    class="p-button-lg">
</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: Install PrimeNG in your given directory.

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

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

Example 1: This is the basic example that shows all three sizes of the Button component.

app.component.html

<div class="header">
  <h2>GeeksforGeeks</h2>
  <h4>Angular PrimeNG Button Sizes</h4>
</div>

<div class="buttons">
  <button pButton type="button"
    label="Small Sized Button"
    class="p-button-sm">
  </button>

  <button pButton type="button"
    label="Default Sized Button"
    class="p-button">
  </button>

  <button pButton type="button"
    label="Large Sized Button"
    class="p-button-lg">
  </button>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

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

button{
    margin-bottom: 10px;
}

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 { AppComponent } from './app.component';
import {ButtonModule} from 'primeng/button'

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

• Run the below command to see the output.

ng serve --open

Output:

Example 2: This example shows different sizes of the rounded button component.

app.component.html

<div class="header">
  <h2>GeeksforGeeks</h2>
  <h4>Angular PrimeNG Rounded Button Sizes</h4>
</div>

<div class="buttons">
  <button pButton type="button"
     label="Small Sized Button"
     class="p-button-sm p-button-rounded">
  </button>

  <button pButton type="button"
     label="Default Sized Button"
     class="p-button p-button-rounded">
  </button>

  <button pButton type="button"
     label="Large Sized Button"
     class="p-button-lg p-button-rounded">
  </button>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

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

button{
    margin-bottom: 10px;
}

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 { 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