diff --git a/components/lib/badgedirective/BadgeDirective.d.ts b/components/lib/badgedirective/BadgeDirective.d.ts
index 1c7dc1cc7..63ef03616 100644
--- a/components/lib/badgedirective/BadgeDirective.d.ts
+++ b/components/lib/badgedirective/BadgeDirective.d.ts
@@ -8,6 +8,90 @@
  */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 
+/**
+ * Custom passthrough(pt) hooks options.
+ */
+export interface BadgePassThroughHooksOptions {
+    /**
+     * Called before bound element's attributes or event listeners are applied.
+     */
+    created?: DirectiveBinding;
+    /**
+     * Called right before the element is inserted into the DOM.
+     */
+    beforeMount?: DirectiveBinding;
+    /**
+     * Called when the bound element's parent component and all its children are mounted.
+     */
+    mounted?: DirectiveBinding;
+    /**
+     * Called before the parent component is updated.
+     */
+    beforeUpdate?: DirectiveBinding;
+    /**
+     * Called after the parent component and all of its children have updated all of its children have updated.
+     */
+    updated?: DirectiveBinding;
+    /**
+     * Called before the parent component is unmounted.
+     */
+    beforeUnmount?: DirectiveBinding;
+    /**
+     * Called when the parent component is unmounted.
+     */
+    unmounted?: DirectiveBinding;
+}
+
+/**
+ * Custom passthrough(pt) css options.
+ */
+export interface BadgePassThroughCSSOptions {
+    /**
+     * Style class of the element.
+     */
+    class?: any;
+    /**
+     * Inline style of the element.
+     */
+    style?: any;
+}
+
+export interface BadgePassThroughDirectiveOptions {
+    /**
+     * Uses to pass attributes to the life cycle hooks.
+     * @see {@link BadgePassThroughHooksOptions}
+     */
+    hooks?: BadgePassThroughHooksOptions;
+    /**
+     * Uses to pass attributes to the styles.
+     *  @see {@link BadgePassThroughCSSOptions}
+     */
+    css?: BadgePassThroughCSSOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BadgeOptions.pt}
+ */
+export interface BadgePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     *  @see {@link BadgePassThroughDirectiveOptions}
+     */
+    root?: BadgePassThroughDirectiveOptions;
+}
+
+/**
+ * Defines options of Badge.
+ */
+export interface BadgeOptions {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BadgePassThroughOptions}
+     */
+    pt?: BadgePassThroughOptions;
+}
+
 /**
  * Defines modifiers of Badge directive.
  */
@@ -41,7 +125,7 @@ export interface BadgeDirectiveBinding extends Omit<DirectiveBinding, 'modifiers
     /**
      * Value of the Badge.
      */
-    value?: string | undefined;
+    value?: string | BadgeOptions | undefined;
     /**
      * Modifiers of the Badge.
      * @type {BadgeDirectiveModifiers}
diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js
index 498802d0c..0ce21d4c3 100644
--- a/components/lib/badgedirective/BadgeDirective.js
+++ b/components/lib/badgedirective/BadgeDirective.js
@@ -1,54 +1,69 @@
+import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
-const BadgeDirective = {
-    mounted(el, options) {
+const BadgeDirective = BaseDirective.extend('badge', {
+    mounted(el, binding) {
         const id = UniqueComponentId() + '_badge';
 
         el.$_pbadgeId = id;
+        el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || false;
 
         let badge = document.createElement('span');
 
         badge.id = id;
-        badge.className = 'p-badge p-component';
+        !el.$_pbadgeUnstyled && (badge.className = 'p-badge p-component');
+        badge.setAttribute('data-pc-name', 'badge');
+        badge.setAttribute('data-pc-section', 'root');
 
-        for (let modifier in options.modifiers) {
-            DomHandler.addClass(badge, 'p-badge-' + modifier);
+        for (let modifier in binding.modifiers) {
+            !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-' + modifier);
         }
 
-        if (options.value != null) {
-            badge.appendChild(document.createTextNode(options.value));
+        if (binding.value != null) {
+            if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
+            else el.$_badgeValue = binding.value;
+            badge.appendChild(document.createTextNode(el.$_badgeValue));
 
-            if (String(options.value).length === 1) {
-                DomHandler.addClass(badge, 'p-badge-no-gutter');
+            if (String(el.$_badgeValue).length === 1 && !el.$_pbadgeUnstyled) {
+                !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-no-gutter');
             }
         } else {
-            DomHandler.addClass(badge, 'p-badge-dot');
+            !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-dot');
         }
 
-        DomHandler.addClass(el, 'p-overlay-badge');
+        !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
+        el.setAttribute('data-p-overlay-badge', 'true');
         el.appendChild(badge);
-    },
-    updated(el, options) {
-        DomHandler.addClass(el, 'p-overlay-badge');
+        el.$_pDirectiveElement = badge;
 
-        if (options.oldValue !== options.value) {
+        BaseDirective.directiveElement = badge;
+        BaseDirective.handleCSS('badge', el, binding);
+    },
+    updated(el, binding) {
+        !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
+        el.setAttribute('data-p-overlay-badge', 'true');
+
+        if (binding.oldValue !== binding.value) {
             let badge = document.getElementById(el.$_pbadgeId);
 
-            if (options.value) {
-                if (DomHandler.hasClass(badge, 'p-badge-dot')) {
-                    DomHandler.removeClass(badge, 'p-badge-dot');
-                }
+            if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
+            else el.$_badgeValue = binding.value;
 
-                if (String(options.value).length === 1) DomHandler.addClass(badge, 'p-badge-no-gutter');
-                else DomHandler.removeClass(badge, 'p-badge-no-gutter');
-            } else if (!options.value && !DomHandler.hasClass(badge, 'p-badge-dot')) {
-                DomHandler.addClass(badge, 'p-badge-dot');
+            if (!el.$_pbadgeUnstyled) {
+                if (el.$_badgeValue) {
+                    if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot');
+
+                    if (el.$_badgeValue.length === 1) DomHandler.addClass(badge, 'p-badge-no-gutter');
+                    else DomHandler.removeClass(badge, 'p-badge-no-gutter');
+                } else if (!el.$_badgeValue && !DomHandler.hasClass(badge, 'p-badge-dot')) {
+                    DomHandler.addClass(badge, 'p-badge-dot');
+                }
             }
 
             badge.innerHTML = '';
-            badge.appendChild(document.createTextNode(options.value));
+            badge.appendChild(document.createTextNode(el.$_badgeValue));
         }
     }
-};
+});
 
 export default BadgeDirective;
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index a5a7a6160..52615bfa8 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -4140,6 +4140,144 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "BadgePassThroughHooksOptions": {
+                    "description": "Custom passthrough(pt) hooks options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "created",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before bound element's attributes or event listeners are applied."
+                        },
+                        {
+                            "name": "beforeMount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called right before the element is inserted into the DOM."
+                        },
+                        {
+                            "name": "mounted",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called when the bound element's parent component and all its children are mounted."
+                        },
+                        {
+                            "name": "beforeUpdate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before the parent component is updated."
+                        },
+                        {
+                            "name": "updated",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called after the parent component and all of its children have updated all of its children have updated."
+                        },
+                        {
+                            "name": "beforeUnmount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before the parent component is unmounted."
+                        },
+                        {
+                            "name": "unmounted",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called when the parent component is unmounted."
+                        }
+                    ],
+                    "methods": []
+                },
+                "BadgePassThroughCSSOptions": {
+                    "description": "Custom passthrough(pt) css options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "class",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "BadgePassThroughDirectiveOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughHooksOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the life cycle hooks."
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughCSSOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the styles."
+                        }
+                    ],
+                    "methods": []
+                },
+                "BadgePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "BadgeOptions.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughDirectiveOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "BadgeOptions": {
+                    "description": "Defines options of Badge.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        }
+                    ],
+                    "methods": []
+                },
                 "BadgeDirectiveModifiers": {
                     "description": "Defines modifiers of Badge directive.",
                     "relatedProp": "",
@@ -4187,7 +4325,7 @@
                             "name": "value",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "string | BadgeOptions",
                             "default": "",
                             "description": "Value of the Badge."
                         },
@@ -4206,6 +4344,7 @@
             }
         }
     },
+    "basedirective/BaseDirective": {},
     "blockui": {
         "description": "BlockUI represents people using icons, labels and images.\n\n[Live Demo](https://www.primevue.org/blockui)",
         "components": {
@@ -19620,6 +19759,145 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "FocusTrapPassThroughHooksOptions": {
+                    "description": "Custom passthrough(pt) hooks options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "created",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before bound element's attributes or event listeners are applied."
+                        },
+                        {
+                            "name": "beforeMount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called right before the element is inserted into the DOM."
+                        },
+                        {
+                            "name": "mounted",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called when the bound element's parent component and all its children are mounted."
+                        },
+                        {
+                            "name": "beforeUpdate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before the parent component is updated."
+                        },
+                        {
+                            "name": "updated",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called after the parent component and all of its children have updated all of its children have updated."
+                        },
+                        {
+                            "name": "beforeUnmount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before the parent component is unmounted."
+                        },
+                        {
+                            "name": "unmounted",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called when the parent component is unmounted."
+                        }
+                    ],
+                    "methods": []
+                },
+                "FocusTrapPassThroughCSSOptions": {
+                    "description": "Custom passthrough(pt) css options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "class",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "FocusTrapPassThroughDirectiveOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FocusTrapPassThroughHooksOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the life cycle hooks."
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FocusTrapPassThroughCSSOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the styles."
+                        }
+                    ],
+                    "methods": []
+                },
+                "FocusTrapPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "FocusTrapOptions.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FocusTrapPassThroughDirectiveOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "firstFocusableElement",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FocusTrapPassThroughDirectiveOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the first focusable element's DOM element."
+                        },
+                        {
+                            "name": "lastFocusableElement",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FocusTrapPassThroughDirectiveOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the last focusable element's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
                 "FocusTrapOptions": {
                     "description": "Defines options of FocusTrap.",
                     "relatedProp": "",
@@ -19631,6 +19909,22 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When present, it specifies that the directive should be disabled."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When When disabled, focustrap will not focus by default."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FocusTrapPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -31780,10 +32074,157 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "RipplePassThroughHooksOptions": {
+                    "description": "Custom passthrough(pt) hooks options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "created",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before bound element's attributes or event listeners are applied."
+                        },
+                        {
+                            "name": "beforeMount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called right before the element is inserted into the DOM."
+                        },
+                        {
+                            "name": "mounted",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called when the bound element's parent component and all its children are mounted."
+                        },
+                        {
+                            "name": "beforeUpdate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before the parent component is updated."
+                        },
+                        {
+                            "name": "updated",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called after the parent component and all of its children have updated all of its children have updated."
+                        },
+                        {
+                            "name": "beforeUnmount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called before the parent component is unmounted."
+                        },
+                        {
+                            "name": "unmounted",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DirectiveBinding<any>",
+                            "default": "",
+                            "description": "Called when the parent component is unmounted."
+                        }
+                    ],
+                    "methods": []
+                },
+                "RipplePassThroughCSSOptions": {
+                    "description": "Custom passthrough(pt) css options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "class",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "RipplePassThroughDirectiveOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RipplePassThroughHooksOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the life cycle hooks."
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RipplePassThroughCSSOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the styles."
+                        }
+                    ],
+                    "methods": []
+                },
+                "RipplePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "RippleOptions.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RipplePassThroughDirectiveOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "RippleOptions": {
+                    "description": "Defines options of Ripple.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RipplePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        }
+                    ],
+                    "methods": []
+                },
                 "RippleDirectiveBinding": {
                     "description": "Binding of Ripple directive.",
                     "relatedProp": "",
-                    "props": [],
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RippleOptions",
+                            "default": "",
+                            "description": "Value of the Ripple."
+                        }
+                    ],
                     "methods": [],
                     "extendedTypes": "Omit<DirectiveBinding, \"modifiers\" | \"value\">"
                 }