diff --git a/components/lib/overlaybadge/style/OverlayBadgeStyle.js b/components/lib/overlaybadge/style/OverlayBadgeStyle.js
index 3ebda953a..4597d89f7 100644
--- a/components/lib/overlaybadge/style/OverlayBadgeStyle.js
+++ b/components/lib/overlaybadge/style/OverlayBadgeStyle.js
@@ -12,6 +12,9 @@ const theme = ({ dt }) => `
transform: translate(50%, -50%);
transform-origin: 100% 0;
margin: 0;
+ outline-width: ${dt('overlaybadge.outline.width')};
+ outline-style: solid;
+ outline-color: ${dt('overlaybadge.outline.color')};
}
`;
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index 38c8fe432..67a9aa764 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -44,6 +44,7 @@ import metergroup from 'primevue/themes/aura/metergroup';
import multiselect from 'primevue/themes/aura/multiselect';
import orderlist from 'primevue/themes/aura/orderlist';
import organizationchart from 'primevue/themes/aura/organizationchart';
+import overlaybadge from 'primevue/themes/aura/overlaybadge';
import paginator from 'primevue/themes/aura/paginator';
import panel from 'primevue/themes/aura/panel';
import panelmenu from 'primevue/themes/aura/panelmenu';
@@ -502,6 +503,7 @@ export default {
multiselect,
orderlist,
organizationchart,
+ overlaybadge,
popover,
paginator,
password,
diff --git a/components/lib/themes/aura/overlaybadge/index.js b/components/lib/themes/aura/overlaybadge/index.js
new file mode 100644
index 000000000..7099114d4
--- /dev/null
+++ b/components/lib/themes/aura/overlaybadge/index.js
@@ -0,0 +1,8 @@
+export default {
+ root: {
+ outline: {
+ width: '2px',
+ color: '{content.background}'
+ }
+ }
+};
diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js
index 65e30ce00..4152708c4 100644
--- a/components/lib/themes/lara/index.js
+++ b/components/lib/themes/lara/index.js
@@ -44,6 +44,7 @@ import metergroup from 'primevue/themes/lara/metergroup';
import multiselect from 'primevue/themes/lara/multiselect';
import orderlist from 'primevue/themes/lara/orderlist';
import organizationchart from 'primevue/themes/lara/organizationchart';
+import overlaybadge from 'primevue/themes/lara/overlaybadge';
import paginator from 'primevue/themes/lara/paginator';
import panel from 'primevue/themes/lara/panel';
import panelmenu from 'primevue/themes/lara/panelmenu';
@@ -507,6 +508,7 @@ export default {
multiselect,
orderlist,
organizationchart,
+ overlaybadge,
popover,
paginator,
password,
diff --git a/components/lib/themes/lara/overlaybadge/index.js b/components/lib/themes/lara/overlaybadge/index.js
new file mode 100644
index 000000000..7099114d4
--- /dev/null
+++ b/components/lib/themes/lara/overlaybadge/index.js
@@ -0,0 +1,8 @@
+export default {
+ root: {
+ outline: {
+ width: '2px',
+ color: '{content.background}'
+ }
+ }
+};
diff --git a/components/lib/themes/nora/index.js b/components/lib/themes/nora/index.js
index 5d8dde286..63d3d2b43 100644
--- a/components/lib/themes/nora/index.js
+++ b/components/lib/themes/nora/index.js
@@ -44,6 +44,7 @@ import metergroup from 'primevue/themes/nora/metergroup';
import multiselect from 'primevue/themes/nora/multiselect';
import orderlist from 'primevue/themes/nora/orderlist';
import organizationchart from 'primevue/themes/nora/organizationchart';
+import overlaybadge from 'primevue/themes/nora/overlaybadge';
import paginator from 'primevue/themes/nora/paginator';
import panel from 'primevue/themes/nora/panel';
import panelmenu from 'primevue/themes/nora/panelmenu';
@@ -501,6 +502,7 @@ export default {
multiselect,
orderlist,
organizationchart,
+ overlaybadge,
popover,
paginator,
password,
diff --git a/components/lib/themes/nora/overlaybadge/index.js b/components/lib/themes/nora/overlaybadge/index.js
new file mode 100644
index 000000000..7099114d4
--- /dev/null
+++ b/components/lib/themes/nora/overlaybadge/index.js
@@ -0,0 +1,8 @@
+export default {
+ root: {
+ outline: {
+ width: '2px',
+ color: '{content.background}'
+ }
+ }
+};
diff --git a/doc/badge/OverlayDoc.vue b/doc/badge/OverlayDoc.vue
index 9c3b95bc2..c6da655e5 100644
--- a/doc/badge/OverlayDoc.vue
+++ b/doc/badge/OverlayDoc.vue
@@ -6,7 +6,7 @@
-
+
@@ -25,7 +25,7 @@ export default {
-
+
@@ -38,7 +38,7 @@ export default {
-
+
@@ -57,7 +57,7 @@ export default {
-
+
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index 0041e2fe3..c5790d736 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -180,7 +180,7 @@ const ICON_ALIAS = {
};
// prettier-ignore
-const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','ripple','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabs','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaybadge','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','ripple','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabs','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
const createThemeAlias = (presets) => {
const presetAlias = presets?.reduce((p_acc, p_name) => {