Angular PrimeNG Button Raised Buttons Component

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 see Angular PrimeNG Button Raised Buttons Component.

A Button component is used for carrying out some action when clicked. The Raised Button is raised a bit from the webpage using the box-shadow property. The raised button gives the user a feeling of click as it goes down when we click on it. The p-button-raised class can be used to make a raised button.

Angular PrimeNG Button Raised Buttons Component Properties:

• label: This property of the button component is used to set the text of the button.

Angular PrimeNG Button Raised Buttons Component Styling:

• p-button-raised: This class is used to create a raised button.
• p-button-rounded: This class is used to make the border of the button rounded.

Syntax:

<button pButton 
    type="button" 
    label="..." 
    class="p-button-raised">
</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

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

Project Structure

Run the below command to see the output.

ng serve --open

Example 1: This example shows the use of the p-button-raised class to create a normal raised button and a Raised Text Button.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
      Angular PrimeNG Button Raised
      Buttons Component
    </h3>
</div>

<div class="buttons">
    <button pButton
        type="button"
        label="Raised Button"
        class="p-button-raised">
    </button>

    <button pButton
        type="button"
        label="Raised Text Button"
        class="p-button-raised 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 { }

Output:

Example 2: In this example, we used the p-button-rounded class along with the p-button-raised class to create a rounded raised button.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
      Angular PrimeNG Button
      Raised Buttons Component
    </h3>
</div>

<div class="buttons">
    <button pButton
        type="button"
        label="Raised Rounded Button"
        class="p-button-raised p-button-rounded">
    </button>

    <button pButton
        type="button"
        label="Raised Rounded Text Button"
        class="p-button-raised p-button-text
        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