Button is an extension to standard button element with icons and theming.
import { ButtonModule } from 'primeng/button';
Text to display on a button is defined with the label property.
<p-button label="Submit"></p-button>
Button can also be used as directive using pButton. In contrary of p-button component, pButton directive does not utilize ripple effect, use pRipple directive to enable ripple.
<button pButton pRipple label="Submit" class="p-button-success"></button>
A button can be rendered as a link as well.
<p-button label="Submit" styleClass="p-button-link"></p-button>
Icon of a button is specified with icon property and position is configured using iconPos attribute.
<p-button icon="pi pi-check"></p-button>
<p-button label="Submit" icon="pi pi-check"></p-button>
<p-button label="Submit" icon="pi pi-check" iconPos="right"></p-button>
Busy state is controlled with the loading property.
<p-button label="Submit" [loading]="loading" (click)="load()"></p-button>
Severity defines the type of button.
<p-button label="Primary"></p-button>
<p-button label="Secondary" styleClass="p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-danger"></p-button>
When disabled is present, the element cannot be edited and focused.
<p-button label="Submit" [disabled]="true"></p-button>
Raised buttons display a shadow to indicate elevation.
<p-button label="Primary" styleClass="p-button-raised"></p-button>
<p-button label="Secondary" styleClass="p-button-raised p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-raised p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-raised p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-raised p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-raised p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-raised p-button-danger"></p-button>
Rounded buttons have a circular border radius.
<p-button label="Primary" styleClass="p-button-rounded"></p-button>
<p-button label="Secondary" styleClass="p-button-rounded p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-rounded p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-rounded p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-rounded p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-rounded p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-rounded p-button-danger"></p-button>
Text buttons are displayed as textual elements.
<p-button label="Primary" styleClass="p-button-text"></p-button>
<p-button label="Secondary" styleClass="p-button-secondary p-button-text"></p-button>
<p-button label="Success" styleClass="p-button-success p-button-text"></p-button>
<p-button label="Info" styleClass="p-button-info p-button-text"></p-button>
<p-button label="Warning" styleClass="p-button-warning p-button-text"></p-button>
<p-button label="Help" styleClass="p-button-help p-button-text"></p-button>
<p-button label="Danger" styleClass="p-button-danger p-button-text"></p-button>
Text buttons can be displayed as raised for elevation.
<p-button label="Primary" styleClass="p-button-raised p-button-text"></p-button>
<p-button label="Secondary" styleClass="p-button-raised p-button-text p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-raised p-button-text p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-raised p-button-text p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-raised p-button-text p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-raised p-button-text p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-raised p-button-text p-button-danger"></p-button>
Outlined buttons display a border without a background initially.
<p-button label="Primary" styleClass="p-button-outlined"></p-button>
<p-button label="Secondary" styleClass="p-button-outlined p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-outlined p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-outlined p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-outlined p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-outlined p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-outlined p-button-danger"></p-button>
Buttons can have icons without labels.
<p-button icon="pi pi-check"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-secondary"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-success"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-info"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-warning"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-help"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
<p-button icon="pi pi-check" styleClass="p-button-rounded"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger"></p-button>
<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-outlined"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-outlined"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-outlined"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-outlined"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-outlined"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-outlined"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-outlined"></p-button>
<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text"></p-button>
Buttons have built-in badge support with badge and badgeClass properties.
<p-button label="Emails" badge="8"></p-button>
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
Multiple buttons are grouped when wrapped inside an element with p-buttonset class.
<span class="p-buttonset">
<button pButton pRipple label="Save" icon="pi pi-check"></button>
<button pButton pRipple label="Delete" icon="pi pi-trash"></button>
<button pButton pRipple label="Cancel" icon="pi pi-times"></button>
</span>
Button provides small and large sizes as alternatives to the standard.
<p-button label="Small" icon="pi pi-check" styleClass="p-button-sm"></p-button>
<p-button label="Normal" icon="pi pi-check" styleClass="p-button" ></p-button>
<p-button label="Large" icon="pi pi-check" styleClass="p-button-lg"></p-button>
Custom content inside a button is defined as children.
<p-button styleClass="p-button-outlined">
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem" />
<span class="ml-2 font-bold">PrimeNG</span>
</p-button>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-button | Button element |
| p-button-icon | Icon element |
| p-button-label | Label element of the button |
Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.
<p-button icon="pi pi-check" aria-label="Submit"></p-button>
<p-button icon="pi pi-check" label="Submit"></p-button>
<p-button class="youtube p-0" aria-label="Youtube">
<i class="pi pi-youtube px-2"></i>
<span class="px-3">Youtube</span>
</p-button>
| Key | Function |
|---|---|
| tab | Moves focus to the button. |
| enter | Activates the button. |
| space | Activates the button. |
API defines helper props, events and others for the PrimeNG Button module.
| 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". |
| loading | boolean | false | Whether the button is in loading state. |
| loadingIcon | string | null | Icon to display in loading state. |
| 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". |
| badge | string | null | Value of the badge. |
| badgeClass | string | null | Style class of the badge. |
| loading | boolean | false | Whether the button is in loading state. |
| loadingIcon | string | null | Icon to display in loading state. |
| 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. |
| ariaLabel | string | null | Used to define a string that autocomplete attribute the current element. |
| Name | Parameters |
|---|---|
| content | - |
| icon | $implicit: style class of the icon. |
| loadingicon | $implicit: style class of the loading icon. |