Fixed #3695 - Button: New Styling Properties

api-generator/components/button.js

@@ -46,6 +46,48 @@ const ButtonProps = [
         type: 'string',
         default: 'pi pi-spinner pi-spin',
         description: 'Icon to display in loading state.'
+    },
+    {
+        name: 'link',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a link style to the button.'
+    },
+    {
+        name: 'severity',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger".'
+    },
+    {
+        name: 'raised',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a shadow to indicate elevation.'
+    },
+    {
+        name: 'rounded',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a circular border radius to the button.'
+    },
+    {
+        name: 'text',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a textual class to the button without a background initially.'
+    },
+    {
+        name: 'outlined',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a border class without a background initially.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the button, valid values are "small" and "large".'
     }
 ];
 

components/button/Button.d.ts

@@ -57,6 +57,39 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * @defaultValue pi pi-spinner pi-spin
      */
     loadingIcon?: string | undefined;
+    /**
+     *  Add a link style to the button.
+     * @defaultValue false
+     */
+    link?: boolean | undefined;
+    /**
+     * Defines the style of the button.
+     */
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | undefined;
+    /**
+     * Add a shadow to indicate elevation.
+     * @defaultValue false
+     */
+    raised?: boolean | undefined;
+    /**
+     * Add a circular border radius to the button.
+     * @defaultValue false
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Add a textual class to the button without a background initially.
+     * @defaultValue false
+     */
+    text?: boolean | undefined;
+    /**
+     * Add a border class without a background initially.
+     * @defaultValue false
+     */
+    outlined?: boolean | undefined;
+    /**
+     * Defines the size of the button.
+     */
+    size?: 'small' | 'large' | undefined;
 }
 
 /**

components/button/Button.vue

@@ -46,18 +46,56 @@ export default {
         loadingIcon: {
             type: String,
             default: 'pi pi-spinner pi-spin'
+        },
+        link: {
+            type: Boolean,
+            default: false
+        },
+        severity: {
+            type: String,
+            default: null
+        },
+        raised: {
+            type: Boolean,
+            default: false
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        text: {
+            type: Boolean,
+            default: false
+        },
+        outlined: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: null
         }
     },
     computed: {
         buttonClass() {
-            return {
+            return [
-                'p-button p-component': true,
+                'p-button p-component',
+                {
                     'p-button-icon-only': this.icon && !this.label,
                     'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                     'p-disabled': this.$attrs.disabled || this.loading,
                     'p-button-loading': this.loading,
-                'p-button-loading-label-only': this.loading && !this.icon && this.label
+                    'p-button-loading-label-only': this.loading && !this.icon && this.label,
-            };
+                    'p-button-link': this.link,
+                    [`p-button-${this.severity}`]: this.severity,
+                    'p-button-raised': this.raised,
+                    'p-button-rounded': this.rounded,
+                    'p-button-text': this.text,
+                    'p-button-outlined': this.outlined,
+                    'p-button-sm': this.size === 'small',
+                    'p-button-lg': this.size === 'large'
+                }
+            ];
         },
         iconStyleClass() {
             return [