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" [link]="true"></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" (onClick)="load()"></p-button>
<p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (onClick)="load()"></p-button>
Severity defines the type of button.
<p-button label="Primary"></p-button>
<p-button label="Secondary" severity="secondary"></p-button>
<p-button label="Success" severity="success"></p-button>
<p-button label="Info" severity="info"></p-button>
<p-button label="Warning" severity="warning"></p-button>
<p-button label="Help" severity="help"></p-button>
<p-button label="Danger" severity="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" [raised]="true"></p-button>
<p-button label="Secondary" [raised]="true" severity="secondary"></p-button>
<p-button label="Success" [raised]="true" severity="success"></p-button>
<p-button label="Info" [raised]="true" severity="info"></p-button>
<p-button label="Warning" [raised]="true" severity="warning"></p-button>
<p-button label="Help" [raised]="true" severity="help"></p-button>
<p-button label="Danger" [raised]="true" severity="danger"></p-button>
Rounded buttons have a circular border radius.
<p-button label="Primary" [rounded]="true"></p-button>
<p-button label="Secondary" [rounded]="true" severity="secondary"></p-button>
<p-button label="Success" [rounded]="true" severity="success"></p-button>
<p-button label="Info" [rounded]="true" severity="info"></p-button>
<p-button label="Warning" [rounded]="true" severity="warning"></p-button>
<p-button label="Help" [rounded]="true" severity="help"></p-button>
<p-button label="Danger" [rounded]="true" severity="danger"></p-button>
Text buttons are displayed as textual elements.
<p-button label="Primary" [text]="true"></p-button>
<p-button label="Secondary" [text]="true" severity="secondary"></p-button>
<p-button label="Success" [text]="true" severity="success"></p-button>
<p-button label="Info" [text]="true" severity="info"></p-button>
<p-button label="Warning" [text]="true" severity="warning"></p-button>
<p-button label="Help" [text]="true" severity="help"></p-button>
<p-button label="Danger" [text]="true" severity="danger"></p-button>
<p-button label="Plain" [text]="true" [plain]="true"></p-button>
Text buttons can be displayed as raised for elevation.
<p-button label="Primary" [text]="true" [raised]="true"></p-button>
<p-button label="Secondary" [text]="true" [raised]="true" severity="secondary"></p-button>
<p-button label="Success" [text]="true" [raised]="true" severity="success"></p-button>
<p-button label="Info" [text]="true" [raised]="true" severity="info"></p-button>
<p-button label="Warning" [text]="true" [raised]="true" severity="warning"></p-button>
<p-button label="Help" [text]="true" [raised]="true" severity="help"></p-button>
<p-button label="Danger" [text]="true" [raised]="true" severity="danger"></p-button>
<p-button label="Plain" [text]="true" [raised]="true" [plain]="true"></p-button>
Outlined buttons display a border without a background initially.
<p-button label="Primary" [outlined]="true"></p-button>
<p-button label="Secondary" [outlined]="true" severity="secondary"></p-button>
<p-button label="Success" [outlined]="true" severity="success"></p-button>
<p-button label="Info" [outlined]="true" severity="info"></p-button>
<p-button label="Warning" [outlined]="true" severity="warning"></p-button>
<p-button label="Help" [outlined]="true" severity="help"></p-button>
<p-button label="Danger" [outlined]="true" severity="danger"></p-button>
Buttons can have icons without labels.
<p-button icon="pi pi-check"></p-button>
<p-button icon="pi pi-bookmark" severity="secondary"></p-button>
<p-button icon="pi pi-search" severity="success"></p-button>
<p-button icon="pi pi-user" severity="info"></p-button>
<p-button icon="pi pi-bell" severity="warning"></p-button>
<p-button icon="pi pi-heart" severity="help"></p-button>
<p-button icon="pi pi-times" severity="danger"></p-button>
<p-button icon="pi pi-check" [rounded]="true"></p-button>
<p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary"></p-button>
<p-button icon="pi pi-search" [rounded]="true" severity="success"></p-button>
<p-button icon="pi pi-user" [rounded]="true" severity="info"></p-button>
<p-button icon="pi pi-bell" [rounded]="true" severity="warning"></p-button>
<p-button icon="pi pi-heart" [rounded]="true" severity="help"></p-button>
<p-button icon="pi pi-times" [rounded]="true" severity="danger"></p-button>
<p-button icon="pi pi-check" [rounded]="true" [outlined]="true"></p-button>
<p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary" [outlined]="true"></p-button>
<p-button icon="pi pi-search" [rounded]="true" severity="success" [outlined]="true"></p-button>
<p-button icon="pi pi-user" [rounded]="true" severity="info" [outlined]="true"></p-button>
<p-button icon="pi pi-bell" [rounded]="true" severity="warning" [outlined]="true"></p-button>
<p-button icon="pi pi-heart" [rounded]="true" severity="help" [outlined]="true"></p-button>
<p-button icon="pi pi-times" [rounded]="true" severity="danger" [outlined]="true"></p-button>
<p-button icon="pi pi-check" [rounded]="true" [text]="true" [raised]="true"></p-button>
<p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" [raised]="true" severity="secondary "></p-button>
<p-button icon="pi pi-search" [rounded]="true" [text]="true" [raised]="true" severity="success "></p-button>
<p-button icon="pi pi-user" [rounded]="true" [text]="true" [raised]="true" severity="info "></p-button>
<p-button icon="pi pi-bell" [rounded]="true" [text]="true" [raised]="true" severity="warning "></p-button>
<p-button icon="pi pi-heart" [rounded]="true" [text]="true" [raised]="true" severity="help "></p-button>
<p-button icon="pi pi-times" [rounded]="true" [text]="true" [raised]="true" severity="danger "></p-button>
<p-button icon="pi pi-check" [rounded]="true" [text]="true"></p-button>
<p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" severity="secondary "></p-button>
<p-button icon="pi pi-search" [rounded]="true" [text]="true" severity="success "></p-button>
<p-button icon="pi pi-user" [rounded]="true" [text]="true" severity="info "></p-button>
<p-button icon="pi pi-bell" [rounded]="true" [text]="true" severity="warning "></p-button>
<p-button icon="pi pi-heart" [rounded]="true" [text]="true" severity="help "></p-button>
<p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger "></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" severity="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" size="small"></p-button>
<p-button label="Normal" icon="pi pi-check"></p-button>
<p-button label="Large" icon="pi pi-check" size="large"></p-button>
Custom content inside a button is defined as children.
<p-button [outlined]="true">
<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.
Button is an extension to standard button element with icons and theming.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
Defines the templates used by the component.
Button directive is an extension to button component.
Defines the input properties of the component.