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

Button Component

Button Directive

Severity Buttons



Number of clicks: {{clicks}}

Import


import {ButtonModule} from 'primeng/button';

Getting Started

Button is either applies as a component using p-button element or a directive using pButton attribute. Directive enhances an existing button whereas p-button is an element on its own.


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

Events

Events are defined using standard notation in pButton and with on* prefix at p-button.


<button pButton type="button" label="Click" (click)="handleClick($event)"></button>
<p-button label="Click" (onClick)="handleClick($event)"></p-button>



export class Model {

    handleClick() {
        //execute action
    }

}

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>
<p-button label="Click" icon="fa-check" iconPos="left"></p-button>

Severity

Different color options are available to define severity levels.

  • .ui-button-secondary
  • .ui-button-success
  • .ui-button-info
  • .ui-button-warning
  • .ui-button-danger

<button pButton type="button" class="ui-button-info"></button>
<p-button label="Click" styleClass="ui-button-info"></p-button>

Properties of pButton

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".
cornerStyleClass string ui-corner-all Defines the cornering of the button, valid replacements are top, left, right and button such as ui-corner-top.

Properties of p-button

Name Type Default Description
type string button Type of the button.
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".
disabled boolean false When present, it specifies that the component should be disabled.
style string null Inline style of the element.
styleClass string null Style class of the element.
onClick event null Callback to execute when button is clicked.
onFocus event null Callback to execute when button is focused.
onBlur event null Callback to execute when button loses focus.

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.

 View on GitHub 

<h3>Button Component</h3>
<p-button (onClick)="count()" label="Click"></p-button>

<p-button (onClick)="count()" icon="fa fa-fw fa-check" label="Click"></p-button>

<p-button (onClick)="count()" icon="fa fa-fw fa-check" iconPos="right" label="Click"></p-button>

<p-button (onClick)="count()" icon="fa fa-fw fa-close"></p-button>

<p-button (onClick)="count()" icon="fa fa-fw fa-check" [disabled]="true" label="Disabled"></p-button>

<h3>Button Directive</h3>
<button pButton type="button" (click)="count()" label="Click"></button>

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

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

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

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

<h3>Severity Buttons</h3>

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

<button pButton type="button" (click)="count()" label="Secondary" class="ui-button-secondary"></button>

<button pButton type="button" (click)="count()" label="Success" class="ui-button-success"></button>

<button pButton type="button" (click)="count()" label="Info"  class="ui-button-info"></button>

<button pButton type="button" (click)="count()" label="Warning"  class="ui-button-warning"></button>

<button pButton type="button" (click)="count()" label="Danger"  class="ui-button-danger"></button>

Number of clicks: {{clicks}}



export class ButtonDemo {

    clicks: number = 0;

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