Angular PrimeNG Button Text Buttons Component

Last Updated : 09 Aug, 2022

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Button Text Buttons Component.

A Button component is used for carrying out some action when clicked. Text buttons are buttons that have a transparent background and show borders when clicked. To create a text button the p-button-text class can be used. The p-button-plain class can be used in addition to the p-button-text class to make the text plain and remove any severity level.

Angular PrimeNG Button Text Buttons Component Properties:

label: The label property of the Button component is used to set the inner text of the Button.
icon: The icon property of the Button component is used to set the icon in the Button.

Angular PrimeNG Button Text Buttons Component Styling:

p-button-text: This class is used to convert a button to a text button with transparent background.
p-button-plain: This class can be used in addition to the p-button-text class to make the text regular and remove any severity level.

Syntax:

<button pButton 
    type="button" 
    label=" ... " 
    class="p-button-text">
</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 example shows the use of the p-button-text class to create a simple text button.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h4>Angular PrimeNG Text Button Component</h4>
</div>
<div class="buttons">
    <button 
        pButton 
        type="button" 
        label="Simple Text Button" 
        class="p-button-text"
    ></button>
    <button 
        pButton 
        type="button" 
        label="Text Button with icon" 
        icon="pi pi-check" 
        class="p-button-text"
    ></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: In this example, we used the p-button-plain class along with the p-button-text class to make the button text regular and remove any severity level.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h4>Angular PrimeNG Text Button Component</h4>
</div>
<div class="buttons">
    <button 
        pButton 
        type="button" 
        label="With p-button-plain Class" 
        class="p-button-text p-button-plain"
    ></button>
    <button 
        pButton 
        type="button" 
        label="Without p-button-plain Class"  
        class="p-button-text"
    ></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 { }