import {Button} from 'primeng/primeng';
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 are defined using standard notation.
<button pButton type="button" (click)="onclick()" label="Click"></button>
export class Model {
onclick() {
}
}
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>
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". |
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 |
Native component that requires the css of PrimeUI Button.
<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++;
}
}
p-tabPanel>