Button Button is an extension to standard input element with icons and theming.


Number of clicks: {{clicks}}

Import


import {ButtonModule} from 'primeng/primeng';

Getting Started

Button is applied to a button element with pButton directive. Text of the button is defined using label property.


<button pButton type="button" label="Click"></button>

Events

Events are defined using standard notation.


<button pButton type="button" (click)="onclick()" label="Click"></button>


export class Model {

onclick() {

}

}

Icons

Icon on a button is specified with icon attribute and position is customized using iconPos attribute. Default icon position is left. To display only an icon, leave label as undefined.


<button pButton type="button" icon="fa-check" iconPos="left"></button>

Attributes

Name Type Default Description
label string null Text of the button.
icon string null Name of the icon.
iconPos string left Position of the icon, valid values are "left" and "right".

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-button Button element
ui-button-icon Icon element
ui-button-text Label element of the button

Dependencies

None.


<button pButton type="text" (click)="count()" label="Click"></button>

<button pButton type="text" (click)="count()" icon="fa-check" label="Click"></button>

<button pButton type="text" (click)="count()" icon="fa-check" iconPos="right" label="Click"></button>

<button pButton type="text" (click)="count()" icon="fa-check"></button>

<button pButton type="text" (click)="count()" icon="fa-check" [disabled]="true" label="Disabled"></button>

Number of clicks: {{clicks}}


export class ButtonDemo {

    clicks: number = 0;

    count() {
        this.clicks++;
    }
}