Angular PrimeNG Button Complete Reference
Angular PrimeNG Button facilitates different standards of Buttons that define the various functionalities & denote the status and severities of the Button. It also provides different styling, such as a Split button, and Speed Dial button for the button component, which enhances the overall user experience of the Site.
The complete list of Button Component is listed below with their brief description:
Button Component
A Button Component is generally used for carrying out some action when clicked. Buttons in the PrimeNG library come in different shapes, sizes, and many other properties.
Components |
Descriptions |
---|---|
Basic Component | These basic buttons are a simple button, a disabled button, and a link button. |
Icons Component | The icon for a button can be specified using the icon property and its position can be altered using the iconPos property of the button. |
Severities Component | A Button is generally used for carrying out some action when clicked. |
Raised Buttons Component | The raised button gives the user a feeling of click as it goes down when we click on it |
Rounded Buttons Component | A rounded button has its corners rounded. |
Text Buttons Component | Text buttons are buttons that have a transparent background and show borders when clicked. |
Button Label | The label property of the button component is used to set the text of the button. |
Button Events | There are other events such as buttons being focused or losses focusing when the actions can be performed. |
Severity Component | There are a total of 6 severity levels: Primary (default), Secondary, Success, Info, Warning, Help, and Danger. |
Text Buttons Component | Text buttons are buttons that have a transparent background and show borders when clicked. |
Outlined Buttons Component | Outlined buttons are used for more emphasis than a text or link button and less emphasis than a filled button. |
Link Buttons Component | The Link button has a transparent background and is styled as a link (<a> tag). |
Badges Component | A badge can be used to show some extra information to the user |
ButtonSet Component | We can create a button set by wrapping the buttons in a container having the class p-buttonset. |
Button Sizes | In addition to the default size, two more sizes are available: small and large. |
Loading State Component | A loading button is used to give the user a signal that something is loading in the background |
Properties of pButton | Buttons in the PrimeNG library come in different shapes, sizes, and many other properties. |
Properties of p-button | Buttons in the PrimeNG library come in different shapes, sizes, and many other properties. |
Button Templates | Buttons in the PrimeNG library come in different shapes, and sizes, and many other properties |
Styling | There are 3 structural style classes for the button component: p-button, p-button-icon, and p-button-label. |
SplitButton Component
The SplitButton component is used to make a button as a dropdown.
Components |
Descriptions |
---|---|
Animation Configuration Component | The SplitButton Component is used to make a button a dropdown. |
MenuModel API Component | PrimeNG menus components share a common API to specify the menuitems and submenus. |
Properties Component | This component can be used to include the different properties to the SplitButton Component. |
Events | It is used to execute a callback function when the main button is clicked. |
Severity | There are 7 severity levels: Primary (default), Secondary, Success, Info, Warning, Help, and Danger. |
Raised and Rounded Buttons Component | It is used to make the button background appear higher than the normal level. |
Styling | This component helps to make the interactive SplitButton by implementing the different stylings provided by Angular PrimeNG. |
Speed Dial Component
The SpeedDial Component is used to display many primary actions that can be done using the floating button action while pressing the button.
Components |
Descriptions |
---|---|
Type | The type of the Speed Dial can be specified using the type property. |
Linear | The SpeedDial Component is used to display many primary actions that can be done using the floating button action while pressing the button. |
Circle, Semi-Circle and Quarter-Circle | It is the inline style of the element. It is of object data type, the default value is null. |
Tooltip | It is the inline style of the element. It is of object data type, the default value is null. |
Transition Duration, Icon and No Rotate Animation | It specifies the opening direction of actions. It is of string data type, the default value is up. |
Mask | It specifies the opening type of actions. It is of string data type, and the default value is linear. |
Direction | The SpeedDial Component is used to display many primary actions that can be done using the floating button action while pressing the button. |
Properties | It is the unique identifier of the element. It is of string data type, the default value is null. |
Templates | The templates are used to put some content on some pre-structured containers. |
Events | There are a total of 4 events for the SpeedDial component. |
Styling | The SpeedDial Component is used to display many primary actions that can be done using the floating button action while pressing the button. |
Contact Us