Angular PrimeNG Button Text Buttons Component Last Updated : 09 Aug, 2022 Comments Improve Suggest changes Like Article Like Report 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: Project Structure 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 { } Run the below command to see the output. ng serve --open Output:  Reference: http://primefaces.org/primeng/button Comment More infoAdvertise with us Next Article Angular PrimeNG Button Label vpsop Follow Improve Article Tags : Web Technologies AngularJS Angular-PrimeNG PrimeNG-Button Similar Reads Button ComponentAngular PrimeNG Button Basic ComponentAngular 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 see Angular PrimeNG Button Basic Component. A Button component is used for carrying out some action when clicked 3 min read Angular PrimeNG Button Icons ComponentAngular 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 see the Button Icons Component in Angular PrimeNG. A Button Component is used for carrying out some action wh 3 min read Angular PrimeNG Button Severities ComponentAngular 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 general 3 min read Angular PrimeNG Button Raised Buttons ComponentAngular 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 see Angular PrimeNG Button Raised Buttons Component. A Button component is used for carrying 3 min read Angular PrimeNG Button Rounded Buttons ComponentAngular 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 be seeing Angular PrimeNG Button Rounded Buttons Component. A Button component 3 min read Angular PrimeNG Button Text Buttons ComponentAngular 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 3 min read Angular PrimeNG Button LabelAngular 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 Angular PrimeNG Button Label. A Button component is used for carrying out some ac 3 min read Angular PrimeNG Button EventsAngular 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. This article will show us how to style the Tooltip component in Angular PrimeNG. A Button is general 4 min read Angular PrimeNG Button Severity ComponentAngular 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 be seeing Angular PrimeNG Button Severity Component. A Button component is used 3 min read Angular PrimeNG Button Text Buttons ComponentAngular 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 3 min read Angular PrimeNG Button Outlined Buttons ComponentAngular 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 see Angular PrimeNG Button Outlined Buttons Component. A Button component is used for carrying out some action w 3 min read Angular PrimeNG Button Link Buttons ComponentAngular 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 see Angular PrimeNG Button Link Buttons Component. A Button component is used for carrying out some action when 3 min read Angular PrimeNG Button Badges ComponentAngular 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 be seeing Angular PrimeNG Button Badges Component. A Button component is used f 3 min read Angular PrimeNG Button ButtonSet ComponentAngular 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 ButtonSet Component. A Button Component is used to p 3 min read Angular PrimeNG Button SizesAngular 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 s 3 min read Angular PrimeNG Button Loading State ComponentAngular 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 Loading State Component. A Button component is used for carrying out some actio 3 min read Angular PrimeNG Button Properties of pButtonAngular 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. This article will show us how to style the Tooltip component in Angular PrimeNG. A Button is general 4 min read Angular PrimeNG Button Properties of p-buttonAngular 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. This article will show us how to style the Tooltip component in Angular PrimeNG. A Button is general 5 min read Angular PrimeNG Button TemplatesAngular 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. This article will show us how to style the Tooltip component in Angular PrimeNG. A Button is general 3 min read Angular PrimeNG Button StylingAngular 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 3 min read SplitButton ComponentAngular PrimeNG SplitButton Animation ConfigurationAngular PrimeNG is a framework used with angular to create components with great styling this framework is very easy to use and is used to make responsive websites. In this article, we will see how to use the SplitButton Animation Configuration Component in Angular PrimeNG. The SplitButton Componen 3 min read Angular PrimeNG MenuModel API MenuItemAngular 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 how to use Angular PrimeNG MenuModel API MenuItem. MenuModel API: Prime 3 min read Angular PrimeNG SplitButton EventsAngular PrimeNG is a framework used with angular to create components with great styling this framework is very easy to use and is used to make responsive websites. In this article, we will see how to use SplitButton Events in angular primeNG. The SplitButton component is used to make a button a dro 3 min read Angular PrimeNG SplitButton SeverityAngular 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 be seeing Angular PrimeNG SplitButton Severity. The SplitButton component combi 4 min read Angular PrimeNG SplitButton Raised and Rounded Buttons ComponentAngular PrimeNG is a framework used with angular to create components with great styling and this framework is very easy to use and is used to make responsive websites. In this article, we will see the SplitButton Raised and Rounded Component in Angular PrimeNG. The SplitButton component is used to 3 min read Angular PrimeNG SplitButton StylingAngular PrimeNG is a framework used with angular to create components with great styling this framework is very easy to use and is used to make responsive websites. In this article, we will see Angular PrimeNG SplitButton Styling. The SplitButton component is used to make a button a dropdown. This c 3 min read Speed Dial ComponentAngular PrimeNG Speed Dial TypeAngular 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 be discussing Angular PrimeNG Speed Dial Type. The Speed Dial component display 4 min read Angular PrimeNG Speed Dial LinearAngular 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 learn how to use the SpeedDial Linear Component in Angular PrimeNG. We will 4 min read Angular PrimeNG Speed Dial Circle, Semi-Circle and Quarter-CircleAngular 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 learn how to use the Speed Dial Circle, Semi-Circle, and Quarter-Circle Com 4 min read Angular PrimeNG Speed Dial Tooltip ComponentAngular 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 learn how to use the SpeedDial Tooltip Component in Angular PrimeNG. We wil 4 min read Angular PrimeNG Speed Dial Transition Duration, Icon and No Rotate AnimationAngular 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 learn how to use the SpeedDial Transition Duration, Icon and No Rotate Anim 4 min read Angular PrimeNG Speed Dial MaskAngular 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 learn how to use the SpeedDial Mask Component in Angular PrimeNG. We will a 4 min read Angular PrimeNG Speed Dial DirectionAngular 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 learn how to use the SpeedDial Direction Component in Angular PrimeNG. We w 4 min read Angular PrimeNG Speed Dial PropertiesAngular 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 how to use the SpeedDial Properties in Angular PrimeNG. The SpeedDial C 5 min read Angular PrimeNG Speed Dial TemplatesAngular 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 learn about Angular PrimeNG Speed Dial Templates. The SpeedDial Component i 3 min read Angular PrimeNG Speed Dial EventsAngular 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 be seeing Angular PrimeNG Speed Dial Events. The Speed Dial component displays 4 min read Angular PrimeNG Speed Dial StylingAngular 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 learn about Angular PrimeNG Speed Dial Styling. The SpeedDial Component is 3 min read Like