Button
Button is an extension to standard button element with icons and theming.
Import #
import { ButtonModule } from 'primeng/button';Basic #
Text to display on a button is defined with the label property.
Directive #
Button can also be used as directive using pButton along with pButtonLabel and pButtonIcon helper directives.
Link #
A button can be rendered as a link when link property is present, while the pButton directive can be applied on an anchor element to style the link as a button.
Icons #
Icon of a button is specified with icon property and position is configured using iconPos attribute.
Loading #
Busy state is controlled with the loading property.
Severity #
Severity defines the type of button.
Disabled #
When disabled is present, the element cannot be edited and focused.
Raised #
Raised buttons display a shadow to indicate elevation.
Rounded #
Rounded buttons have a circular border radius.
Text #
Text buttons are displayed as textual elements.
Raised Text #
Text buttons can be displayed as raised for elevation.
Outlined #
Outlined buttons display a border without a background initially.
Icon Only #
Buttons can have icons without labels.
Badge #
Buttons have built-in badge support with badge and badgeClass properties.
Button Group #
Multiple buttons are grouped when wrapped inside an element with ButtonGroup component.
Sizes #
Button provides small and large sizes as alternatives to the standard.
Template #
Custom content inside a button is defined as children.
Accessibility #
Screen Reader
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>Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the button. |
| enter | Activates the button. |
| space | Activates the button. |
