Fixed #3649 - Badge: do not render Zero correctly

api-generator/components/badge.js

@@ -1,7 +1,7 @@
 const BadgeProps = [
     {
         name: 'value',
-        type: 'any',
+        type: 'string | number',
         default: 'null',
         description: 'Value to display inside the badge.'
     },

components/badge/Badge.d.ts

@@ -17,15 +17,15 @@ export interface BadgeProps {
     /**
      * Value to display inside the badge.
      */
-    value?: any;
+    value?: string | number;
     /**
      * Severity type of the badge.
      */
-    severity?: 'info' | 'success' | 'warning' | 'danger' | undefined;
+    severity?: 'info' | 'success' | 'warning' | 'danger' | null | undefined;
     /**
      * Size of the badge, valid options are 'large' and 'xlarge'.
      */
-    size?: 'large' | 'xlarge' | undefined;
+    size?: 'large' | 'xlarge' | null | undefined;
 }
 
 /**

components/badge/Badge.vue

@@ -5,12 +5,23 @@
 </template>
 
 <script>
+import { ObjectUtils } from 'primevue/utils';
+
 export default {
     name: 'Badge',
     props: {
-        value: null,
-        severity: null,
-        size: null
+        value: {
+            type: [String, Number],
+            default: null
+        },
+        severity: {
+            type: String,
+            default: null
+        },
+        size: {
+            type: String,
+            default: null
+        }
     },
     computed: {
         containerClass() {
@@ -20,8 +31,8 @@ export default {
             return [
                 'p-badge p-component',
                 {
-                    'p-badge-no-gutter': this.value && String(this.value).length === 1,
-                    'p-badge-dot': !this.value && !this.$slots.default,
+                    'p-badge-no-gutter': ObjectUtils.isNotEmpty(this.value) && String(this.value).length === 1,
+                    'p-badge-dot': ObjectUtils.isEmpty(this.value) && !this.$slots.default,
                     'p-badge-lg': this.size === 'large',
                     'p-badge-xl': this.size === 'xlarge',
                     'p-badge-info': this.severity === 'info',