Button - Button - 《PrimeNG Document》

Documentation
Source

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

Documentation

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

Raised and Rounded Buttons

A button can be raised by having "ui-button-raised" style class and similarly borders can be made rounded using "ui-button-rounded" class.


<button pButton type="button" class="ui-button-raised ui-button-rounded"></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	null	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.

Source

View on GitHub


<h3 class="first">Button Component</h3>
<p-button label="Click"></p-button>
<p-button icon="pi pi-check" label="Click"></p-button>
<p-button icon="pi pi-check" iconPos="right" label="Click"></p-button>
<p-button icon="pi pi-check"></p-button>
<p-button icon="pi pi-check" [disabled]="true" label="Disabled"></p-button>
<h3>Button Directive</h3>
<button pButton type="button"label="Click"></button>
<button pButton type="button" icon="pi pi-check" label="Click"></button>
<button pButton type="button" icon="pi pi-check" iconPos="right" label="Click"></button>
<button pButton type="button" icon="pi pi-check"></button>
<button pButton type="button" icon="pi pi-check" [disabled]="true" label="Disabled"></button>
<h3>Severity Buttons</h3>
<button pButton type="button" label="Primary"></button>
<button pButton type="button" label="Secondary" class="ui-button-secondary"></button>
<button pButton type="button" label="Success" class="ui-button-success"></button>
<button pButton type="button" label="Info" class="ui-button-info"></button>
<button pButton type="button" label="Warning" class="ui-button-warning"></button>
<button pButton type="button" label="Danger" class="ui-button-danger"></button>
<h3>Raised Buttons</h3>
<button pButton type="button" label="Primary" class="ui-button-raised"></button>
<button pButton type="button" label="Secondary" class="ui-button-raised ui-button-secondary"></button>
<button pButton type="button" label="Success" class="ui-button-raised ui-button-success"></button>
<button pButton type="button" label="Info" class="ui-button-raised ui-button-info"></button>
<button pButton type="button" label="Warning" class="ui-button-raised ui-button-warning"></button>
<button pButton type="button" label="Danger" class="ui-button-raised ui-button-danger"></button>
<h3>Rounded Buttons</h3>
<button pButton type="button" label="Primary" class="ui-button-rounded"></button>
<button pButton type="button" label="Secondary" class="ui-button-rounded ui-button-secondary"></button>
<button pButton type="button" label="Success" class="ui-button-rounded ui-button-success"></button>
<button pButton type="button" label="Info" class="ui-button-rounded ui-button-info"></button>
<button pButton type="button" label="Warning" class="ui-button-rounded ui-button-warning"></button>
<button pButton type="button" label="Danger" class="ui-button-rounded ui-button-danger"></button>


export class ButtonDemo {
    clicks: number = 0;
    count() {
        this.clicks++;
    }
}