The Button component is more useful with icons and severity properties. The icon attribute is used to represent font-awesome icons on top of it. Default icon position is the left-hand position. This can be customized using the iconPos attribute with valid values as left and right. In order to display only one icon, leave the label as undefined. An example of the Button components with various combinations of icon and label would be written as follows:

<button pButton type="button" icon="fa-close"></button>
<button pButton type="button" icon="fa-check" label="Yes"></button>
<button pButton type="button" icon="fa-check" iconPos="right" label="Yes"></button>

In the preceding example, Buttons are defined as without a label, with the label, and right-positioned icon with the label in a respective order. The following screenshot shows a snapshot result of the Button with icons as an example:

To differentiate different severity levels of user actions, PrimeNG provides five different classes, that is, these style classes are different from regular theme colors:

• ui-button-secondary
• ui-button-success
• ui-button-info
• ui-button-warning
• ui-button-danger

The following screenshot shows a snapshot result of a Button with all severity cases (compared to regular theme class) as an example:

The user interactions are prevented using the regular disabled attribute.