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" />
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="Link" [link]="true" />
<a href="https://angular.dev/" target="_blank" rel="noopener noreferrer" class="p-button font-bold">
External
</a>
<a routerLink="/" class="p-button font-bold">
Router
</a>
Icon of a button is specified with icon property and position is configured using iconPos attribute.
<p-button icon="pi pi-check" />
<p-button label="Submit" icon="pi pi-check" />
<p-button label="Submit" icon="pi pi-check" iconPos="right" />
Busy state is controlled with the loading property.
<p-button
label="Search"
icon="pi pi-check"
[loading]="loading"
(onClick)="load()" />
Severity defines the type of button.
<p-button label="Primary" />
<p-button label="Secondary" severity="secondary" />
<p-button label="Success" severity="success" />
<p-button label="Info" severity="info" />
<p-button label="Warn" severity="warn" />
<p-button label="Help" severity="help" />
<p-button label="Danger" severity="danger" />
<p-button label="Contrast" severity="contrast" />
When disabled is present, the element cannot be edited and focused.
<p-button label="Submit" [disabled]="true" />
Raised buttons display a shadow to indicate elevation.
<p-button label="Primary" [raised]="true" />
<p-button label="Secondary" [raised]="true" severity="secondary" />
<p-button label="Success" [raised]="true" severity="success" />
<p-button label="Info" [raised]="true" severity="info" />
<p-button label="Warn" [raised]="true" severity="warn" />
<p-button label="Help" [raised]="true" severity="help" />
<p-button label="Danger" [raised]="true" severity="danger" />
<p-button label="Contrast" [raised]="true" severity="contrast" />
Rounded buttons have a circular border radius.
<p-button label="Primary" [rounded]="true" />
<p-button label="Secondary" [rounded]="true" severity="secondary" />
<p-button label="Success" [rounded]="true" severity="success" />
<p-button label="Info" [rounded]="true" severity="info" />
<p-button label="Warn" [rounded]="true" severity="warn" />
<p-button label="Help" [rounded]="true" severity="help" />
<p-button label="Danger" [rounded]="true" severity="danger" />
<p-button label="Contrast" [rounded]="true" severity="contrast" />
Text buttons are displayed as textual elements.
<p-button label="Primary" [text]="true" />
<p-button label="Secondary" [text]="true" severity="secondary" />
<p-button label="Success" [text]="true" severity="success" />
<p-button label="Info" [text]="true" severity="info" />
<p-button label="Warn" [text]="true" severity="warn" />
<p-button label="Help" [text]="true" severity="help" />
<p-button label="Danger" [text]="true" severity="danger" />
<p-button label="Plain" [text]="true" [plain]="true" />
Text buttons can be displayed as raised for elevation.
<p-button label="Primary" [text]="true" [raised]="true" />
<p-button label="Secondary" [text]="true" [raised]="true" severity="secondary" />
<p-button label="Success" [text]="true" [raised]="true" severity="success" />
<p-button label="Info" [text]="true" [raised]="true" severity="info" />
<p-button label="Warn" [text]="true" [raised]="true" severity="warn" />
<p-button label="Help" [text]="true" [raised]="true" severity="help" />
<p-button label="Danger" [text]="true" [raised]="true" severity="danger" />
<p-button label="Plain" [text]="true" [raised]="true" [plain]="true" />
Outlined buttons display a border without a background initially.
<p-button label="Primary" [outlined]="true" />
<p-button label="Secondary" [outlined]="true" severity="secondary" />
<p-button label="Success" [outlined]="true" severity="success" />
<p-button label="Info" [outlined]="true" severity="info" />
<p-button label="Warn" [outlined]="true" severity="warn" />
<p-button label="Help" [outlined]="true" severity="help" />
<p-button label="Danger" [outlined]="true" severity="danger" />
<p-button label="Contrast" [outlined]="true" severity="contrast" />
Buttons can have icons without labels.
<p-button icon="pi pi-check" />
<p-button icon="pi pi-bookmark" severity="secondary" />
<p-button icon="pi pi-search" severity="success" />
<p-button icon="pi pi-user" severity="info" />
<p-button icon="pi pi-bell" severity="warn" />
<p-button icon="pi pi-heart" severity="help" />
<p-button icon="pi pi-times" severity="danger" />
<p-button icon="pi pi-check" [rounded]="true" />
<p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary" />
<p-button icon="pi pi-search" [rounded]="true" severity="success" />
<p-button icon="pi pi-user" [rounded]="true" severity="info" />
<p-button icon="pi pi-bell" [rounded]="true" severity="warn" />
<p-button icon="pi pi-heart" [rounded]="true" severity="help" />
<p-button icon="pi pi-times" [rounded]="true" severity="danger" />
<p-button icon="pi pi-check" [rounded]="true" [outlined]="true" />
<p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary" [outlined]="true" />
<p-button icon="pi pi-search" [rounded]="true" severity="success" [outlined]="true" />
<p-button icon="pi pi-user" [rounded]="true" severity="info" [outlined]="true" />
<p-button icon="pi pi-bell" [rounded]="true" severity="warn" [outlined]="true" />
<p-button icon="pi pi-heart" [rounded]="true" severity="help" [outlined]="true" />
<p-button icon="pi pi-times" [rounded]="true" severity="danger" [outlined]="true" />
<p-button icon="pi pi-check" [rounded]="true" [text]="true" [raised]="true" />
<p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" [raised]="true" severity="secondary " />
<p-button icon="pi pi-search" [rounded]="true" [text]="true" [raised]="true" severity="success " />
<p-button icon="pi pi-user" [rounded]="true" [text]="true" [raised]="true" severity="info " />
<p-button icon="pi pi-bell" [rounded]="true" [text]="true" [raised]="true" severity="warning " />
<p-button icon="pi pi-heart" [rounded]="true" [text]="true" [raised]="true" severity="help " />
<p-button icon="pi pi-times" [rounded]="true" [text]="true" [raised]="true" severity="danger " />
<p-button icon="pi pi-check" [rounded]="true" [text]="true" />
<p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" severity="secondary " />
<p-button icon="pi pi-search" [rounded]="true" [text]="true" severity="success " />
<p-button icon="pi pi-user" [rounded]="true" [text]="true" severity="info " />
<p-button icon="pi pi-bell" [rounded]="true" [text]="true" severity="warning " />
<p-button icon="pi pi-heart" [rounded]="true" [text]="true" severity="help " />
<p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger " />
Buttons have built-in badge support with badge and badgeClass properties.
<p-button label="Emails" badge="8" />
<p-button
label="Messages"
icon="pi pi-users"
badge="2"
badgeClass="p-badge-contrast"
outlined="true" />
Multiple buttons are grouped when wrapped inside an element with ButtonGroup component.
<p-buttonGroup>
<p-button label="Save" icon="pi pi-check" />
<p-button label="Delete" icon="pi pi-trash" />
<p-button label="Cancel" icon="pi pi-times" />
</p-buttonGroup>
Button provides small and large sizes as alternatives to the standard.
<p-button label="Small" icon="pi pi-check" size="small" />
<p-button label="Normal" icon="pi pi-check" />
<p-button label="Large" icon="pi pi-check" size="large" />
Custom content inside a button is defined as children.
<p-button [outlined]="true">
<svg width="35" height="40" viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
<path d="..." fill="var(--primary-color)" />
<mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
<path d="..." fill="var(--primary-color-text)" />
</mask>
<g mask="url(#mask0_1_36)">
<path fill-rule="evenodd" clip-rule="evenodd" d="..." fill="var(--primary-color)" />
</g>
<path d="..." fill="var(--primary-color-text)" />
<path d="..." fill="var(--primary-color-text)" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="..."
fill="var(--primary-color-text)"
/>
<path d="..." />
<path d="..." />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="..."
fill="var(--primary-color-text)"
/>
<path d="..." fill="var(--primary-color-text)" />
<path d="..." fill="var(--primary-color-text)" />
<path d="..." fill="var(--primary-color-text)" />
<path d="..." fill="var(--primary-color-text)" />
</svg>
</p-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 icon="pi pi-check" label="Submit" />
<p-button class="youtube p-0" aria-label="Youtube">
<i class="pi pi-youtube px-2"></i>
<span class="px-4">Youtube</span>
</p-button>
Key | Function |
---|---|
tab | Moves focus to the button. |
enter | Activates the button. |
space | Activates the button. |