diff --git a/api-generator/components/button.js b/api-generator/components/button.js index 4cd1102eb..3119b5582 100644 --- a/api-generator/components/button.js +++ b/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".' } ]; diff --git a/components/button/Button.d.ts b/components/button/Button.d.ts index ccf3a01ea..9178749f5 100755 --- a/components/button/Button.d.ts +++ b/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; } /** diff --git a/components/button/Button.vue b/components/button/Button.vue index b65a587cf..425d1655e 100755 --- a/components/button/Button.vue +++ b/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 { - 'p-button p-component': true, - '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 - }; + return [ + '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-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 [