From 0358ea367eec1a5297d971a7dea19b3cb57ecc1b Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Mon, 20 Jul 2026 18:46:57 +0300
Subject: [PATCH 1/8] feat(badge): update the samples

---
 live-editing/configs/BadgeConfigGenerator.ts  | 34 +++++++----
 .../badge-dot.component.html}                 |  0
 .../badge-dot.component.scss}                 |  0
 .../badge-dot.component.ts}                   |  8 +--
 .../badge-list.component.html}                |  0
 .../badge-list.component.scss}                |  0
 .../badge-list.component.ts}                  |  8 +--
 .../badge-overview.component.html             |  4 ++
 .../badge-overview.component.scss             | 18 ++++++
 .../badge-overview.component.ts               | 12 ++++
 .../badge-shape/badge-shape.component.html    |  3 +
 .../badge-shape/badge-shape.component.scss    |  3 +
 .../badge-shape/badge-shape.component.ts      | 11 ++++
 .../badge-styling.component.html}             |  0
 .../badge-styling.component.scss}             |  0
 .../badge-styling.component.ts}               |  8 +--
 .../layout.scss                               |  0
 .../badge-tailwind-styling.component.html}    |  0
 .../badge-tailwind-styling.component.scss}    |  0
 .../badge-tailwind-styling.component.ts}      |  8 +--
 .../layout.scss                               |  0
 .../badge-variants.component.html}            |  0
 .../badge-variants.component.scss}            |  0
 .../badge-variants.component.ts}              |  8 +--
 .../data-display/data-display-routes-data.ts  | 14 +++--
 src/app/data-display/data-display.routes.ts   | 56 +++++++++++--------
 26 files changed, 137 insertions(+), 58 deletions(-)
 rename src/app/data-display/badge/{badge-dot-sample/badge-dot-sample.component.html => badge-dot/badge-dot.component.html} (100%)
 rename src/app/data-display/badge/{badge-dot-sample/badge-dot-sample.component.scss => badge-dot/badge-dot.component.scss} (100%)
 rename src/app/data-display/badge/{badge-sample-2/badge-sample-2.component.ts => badge-dot/badge-dot.component.ts} (63%)
 rename src/app/data-display/badge/{badge-sample-3/badge-sample-3.component.html => badge-list/badge-list.component.html} (100%)
 rename src/app/data-display/badge/{badge-sample-3/badge-sample-3.component.scss => badge-list/badge-list.component.scss} (100%)
 rename src/app/data-display/badge/{badge-sample-3/badge-sample-3.component.ts => badge-list/badge-list.component.ts} (79%)
 create mode 100644 src/app/data-display/badge/badge-overview/badge-overview.component.html
 create mode 100644 src/app/data-display/badge/badge-overview/badge-overview.component.scss
 create mode 100644 src/app/data-display/badge/badge-overview/badge-overview.component.ts
 create mode 100644 src/app/data-display/badge/badge-shape/badge-shape.component.html
 create mode 100644 src/app/data-display/badge/badge-shape/badge-shape.component.scss
 create mode 100644 src/app/data-display/badge/badge-shape/badge-shape.component.ts
 rename src/app/data-display/badge/{badge-styling-sample/badge-styling-sample.component.html => badge-styling/badge-styling.component.html} (100%)
 rename src/app/data-display/badge/{badge-styling-sample/badge-styling-sample.component.scss => badge-styling/badge-styling.component.scss} (100%)
 rename src/app/data-display/badge/{badge-styling-sample/badge-styling-sample.component.ts => badge-styling/badge-styling.component.ts} (77%)
 rename src/app/data-display/badge/{badge-styling-sample => badge-styling}/layout.scss (100%)
 rename src/app/data-display/badge/{badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html => badge-tailwind-styling/badge-tailwind-styling.component.html} (100%)
 rename src/app/data-display/badge/{badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss => badge-tailwind-styling/badge-tailwind-styling.component.scss} (100%)
 rename src/app/data-display/badge/{badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts => badge-tailwind-styling/badge-tailwind-styling.component.ts} (74%)
 rename src/app/data-display/badge/{badge-tailwind-styling-sample => badge-tailwind-styling}/layout.scss (100%)
 rename src/app/data-display/badge/{badge-sample-2/badge-sample-2.component.html => badge-variants/badge-variants.component.html} (100%)
 rename src/app/data-display/badge/{badge-sample-2/badge-sample-2.component.scss => badge-variants/badge-variants.component.scss} (100%)
 rename src/app/data-display/badge/{badge-dot-sample/badge-dot-sample.component.ts => badge-variants/badge-variants.component.ts} (62%)

diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts
index c331361e12..1d76204bd1 100644
--- a/live-editing/configs/BadgeConfigGenerator.ts
+++ b/live-editing/configs/BadgeConfigGenerator.ts
@@ -17,34 +17,48 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge sample 2
+        // badge overview
         configs.push(new Config({
-            component: 'BadgeSample2Component',
+            component: 'BadgeOverviewComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge shape
+        configs.push(new Config({
+            component: 'BadgeShapeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge overview
+        configs.push(new Config({
+            component: 'BadgeVariantsComponent',
             additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge sample 3
+        // badge list
         configs.push(new Config({
-            component: 'BadgeSample3Component',
+            component: 'BadgeListComponent',
             additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge styling sample
+        // badge styling
         configs.push(new Config({
-            component: 'BadgeStylingSampleComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling-sample/layout.scss"],
+            component: 'BadgeStylingComponent',
+            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge dot sample
+        // badge dot
         configs.push(new Config({
-            component: 'BadgeDotSampleComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss"],
+            component: 'BadgeDotComponent',
+            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot/badge-dot.component.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html b/src/app/data-display/badge/badge-dot/badge-dot.component.html
similarity index 100%
rename from src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html
rename to src/app/data-display/badge/badge-dot/badge-dot.component.html
diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
similarity index 100%
rename from src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss
rename to src/app/data-display/badge/badge-dot/badge-dot.component.scss
diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts b/src/app/data-display/badge/badge-dot/badge-dot.component.ts
similarity index 63%
rename from src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts
rename to src/app/data-display/badge/badge-dot/badge-dot.component.ts
index 3f22d52960..a3877635bc 100644
--- a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts
+++ b/src/app/data-display/badge/badge-dot/badge-dot.component.ts
@@ -3,10 +3,10 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 @Component({
-    selector: 'app-badge-sample-2',
-    styleUrls: ['./badge-sample-2.component.scss'],
-    templateUrl: './badge-sample-2.component.html',
+    selector: 'app-badge-dot',
+    styleUrls: ['./badge-dot.component.scss'],
+    templateUrl: './badge-dot.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeSample2Component { }
+export class BadgeDotComponent { }
diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html b/src/app/data-display/badge/badge-list/badge-list.component.html
similarity index 100%
rename from src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html
rename to src/app/data-display/badge/badge-list/badge-list.component.html
diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.scss b/src/app/data-display/badge/badge-list/badge-list.component.scss
similarity index 100%
rename from src/app/data-display/badge/badge-sample-3/badge-sample-3.component.scss
rename to src/app/data-display/badge/badge-list/badge-list.component.scss
diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts b/src/app/data-display/badge/badge-list/badge-list.component.ts
similarity index 79%
rename from src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts
rename to src/app/data-display/badge/badge-list/badge-list.component.ts
index 446dc994dd..3a3a3406b3 100644
--- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts
+++ b/src/app/data-display/badge/badge-list/badge-list.component.ts
@@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 
 @Component({
-    selector: 'app-badge-sample-3',
-    styleUrls: ['./badge-sample-3.component.scss'],
-    templateUrl: './badge-sample-3.component.html',
+    selector: 'app-badge-list',
+    styleUrls: ['./badge-list.component.scss'],
+    templateUrl: './badge-list.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeSample3Component {
+export class BadgeListComponent {
   public members: Member[] = [
     new Member('Terrance Orta', 'online'),
     new Member('Donna Price', 'online'),
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.html b/src/app/data-display/badge/badge-overview/badge-overview.component.html
new file mode 100644
index 0000000000..d1a668e776
--- /dev/null
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.html
@@ -0,0 +1,4 @@
+<div class="wrapper">
+  <igx-avatar initials="JD"></igx-avatar>
+  <igx-badge outlined></igx-badge>
+</div>
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss
new file mode 100644
index 0000000000..d228601be8
--- /dev/null
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss
@@ -0,0 +1,18 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+}
+
+igx-badge {
+  --size: 18px;
+
+  position: relative;
+  right: 10px;
+  top: -15px;
+}
+
+igx-avatar {
+  --size: 45px;
+  margin-top: 6px;
+}
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.ts b/src/app/data-display/badge/badge-overview/badge-overview.component.ts
new file mode 100644
index 0000000000..9049e07c26
--- /dev/null
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+
+@Component({
+    selector: 'app-badge-overview',
+    templateUrl: './badge-overview.component.html',
+    styleUrls: ['./badge-overview.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxAvatarComponent, IgxBadgeComponent]
+})
+export class BadgeOverviewComponent { }
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.html b/src/app/data-display/badge/badge-shape/badge-shape.component.html
new file mode 100644
index 0000000000..c4c5d326ed
--- /dev/null
+++ b/src/app/data-display/badge/badge-shape/badge-shape.component.html
@@ -0,0 +1,3 @@
+<div class="wrapper">
+  <igx-badge shape="square"></igx-badge>
+</div>
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
new file mode 100644
index 0000000000..1910721299
--- /dev/null
+++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
@@ -0,0 +1,3 @@
+.wrapper {
+  padding: 16px;
+}
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.ts b/src/app/data-display/badge/badge-shape/badge-shape.component.ts
new file mode 100644
index 0000000000..076f71077b
--- /dev/null
+++ b/src/app/data-display/badge/badge-shape/badge-shape.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+
+@Component({
+    selector: 'app-badge-shape',
+    templateUrl: './badge-shape.component.html',
+    styleUrls: ['./badge-shape.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxBadgeComponent]
+})
+export class BadgeShapeComponent { }
diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html b/src/app/data-display/badge/badge-styling/badge-styling.component.html
similarity index 100%
rename from src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html
rename to src/app/data-display/badge/badge-styling/badge-styling.component.html
diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
similarity index 100%
rename from src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss
rename to src/app/data-display/badge/badge-styling/badge-styling.component.scss
diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts b/src/app/data-display/badge/badge-styling/badge-styling.component.ts
similarity index 77%
rename from src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts
rename to src/app/data-display/badge/badge-styling/badge-styling.component.ts
index 55b522e709..4a8d990d50 100644
--- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts
+++ b/src/app/data-display/badge/badge-styling/badge-styling.component.ts
@@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 
 @Component({
-    selector: 'app-badge-styling-sample',
-    styleUrls: ['./badge-styling-sample.component.scss'],
-    templateUrl: './badge-styling-sample.component.html',
+    selector: 'app-badge-styling',
+    styleUrls: ['./badge-styling.component.scss'],
+    templateUrl: './badge-styling.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeStylingSampleComponent {
+export class BadgeStylingComponent {
   public members: Member[] = [
     new Member('Terrance Orta', 'online'),
     new Member('Donna Price', 'online'),
diff --git a/src/app/data-display/badge/badge-styling-sample/layout.scss b/src/app/data-display/badge/badge-styling/layout.scss
similarity index 100%
rename from src/app/data-display/badge/badge-styling-sample/layout.scss
rename to src/app/data-display/badge/badge-styling/layout.scss
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html
similarity index 100%
rename from src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
rename to src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
similarity index 100%
rename from src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss
rename to src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts
similarity index 74%
rename from src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts
rename to src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts
index 394ebbcc88..2ff74b33d7 100644
--- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts
+++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts
@@ -6,13 +6,13 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 
 @Component({
-    selector: 'app-badge-tailwind-styling-sample',
-    styleUrls: ['./badge-tailwind-styling-sample.component.scss'],
-    templateUrl: './badge-tailwind-styling-sample.component.html',
+    selector: 'app-badge-tailwind-styling',
+    styleUrls: ['./badge-tailwind-styling.component.scss'],
+    templateUrl: './badge-tailwind-styling.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeTailwindStylingSampleComponent {
+export class BadgeTailwindStylingComponent {
   public members: Member[] = [
     new Member('Terrance Orta', 'online'),
     new Member('Donna Price', 'online'),
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss b/src/app/data-display/badge/badge-tailwind-styling/layout.scss
similarity index 100%
rename from src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss
rename to src/app/data-display/badge/badge-tailwind-styling/layout.scss
diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html b/src/app/data-display/badge/badge-variants/badge-variants.component.html
similarity index 100%
rename from src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html
rename to src/app/data-display/badge/badge-variants/badge-variants.component.html
diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
similarity index 100%
rename from src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss
rename to src/app/data-display/badge/badge-variants/badge-variants.component.scss
diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts b/src/app/data-display/badge/badge-variants/badge-variants.component.ts
similarity index 62%
rename from src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts
rename to src/app/data-display/badge/badge-variants/badge-variants.component.ts
index 3459cb7d44..7d5eb9b51c 100644
--- a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts
+++ b/src/app/data-display/badge/badge-variants/badge-variants.component.ts
@@ -3,10 +3,10 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 @Component({
-    selector: 'app-badge-dot-sample',
-    styleUrls: ['./badge-dot-sample.component.scss'],
-    templateUrl: './badge-dot-sample.component.html',
+    selector: 'app-badge-variants',
+    styleUrls: ['./badge-variants.component.scss'],
+    templateUrl: './badge-variants.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeDotSampleComponent { }
+export class BadgeVariantsComponent { }
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index 84c0e4554e..46c197a5ef 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -2,12 +2,14 @@
 
 export const dataDisplayRoutesData = {
     "badge-icon": { displayName: "Badge Icon Sample", parentName: "Badge" },
-    "badge-sample-2": { displayName: "Simple Badge", parentName: "Badge" },
-    "badge-sample-3": { displayName: "Badge for List Items", parentName: "Badge" },
-    "badge-outlined-sample": { displayName: "Badge Outlined Sample", parentName: "Badge" },
-    "badge-dot-sample": { displayName: "Badge Dot Sample", parentName: "Badge" },
-    "badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" },
-    "badge-tailwind-styling-sample": { displayName: "Badge Tailwind Styling Sample", parentName: "Badge" },
+    "badge-overview": { displayName: "Overview", parentName: "Badge" },
+    "badge-shape": { displayName: "Badge Shape", parentName: "Badge" },
+    "badge-variants": { displayName: "Badge Variants", parentName: "Badge" },
+    "badge-list": { displayName: "Badge for List Items", parentName: "Badge" },
+    "badge-outlined": { displayName: "Badge Outlined", parentName: "Badge" },
+    "badge-dot": { displayName: "Badge Dot", parentName: "Badge" },
+    "badge-styling": { displayName: "Badge Styling", parentName: "Badge" },
+    "badge-tailwind-styling": { displayName: "Badge Tailwind Styling", parentName: "Badge" },
     "chip-simple": { displayName: "Chip Simple", parentName: "Chip" },
     "chip-variants": { displayName: "Chip Variants", parentName: "Chip" },
     "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 4db820c452..d323ab912f 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -1,10 +1,12 @@
 import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
-import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component';
-import { BadgeSample3Component } from './badge/badge-sample-3/badge-sample-3.component';
+import { BadgeOverviewComponent } from './badge/badge-overview/badge-overview.component';
+import { BadgeShapeComponent } from './badge/badge-shape/badge-shape.component';
+import { BadgeVariantsComponent } from './badge/badge-variants/badge-variants.component';
+import { BadgeListComponent } from './badge/badge-list/badge-list.component';
 import { BadgeOutlinedComponent } from './badge/badge-outlined/badge-outlined.component';
-import { BadgeDotSampleComponent } from './badge/badge-dot-sample/badge-dot-sample.component';
-import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-styling-sample.component';
-import { BadgeTailwindStylingSampleComponent } from './badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component';
+import { BadgeDotComponent } from './badge/badge-dot/badge-dot.component';
+import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.component';
+import { BadgeTailwindStylingComponent } from './badge/badge-tailwind-styling/badge-tailwind-styling.component';
 import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component';
 import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component';
 import { ChipVariantsComponent } from './chip/chip-variants/chip-variants.component';
@@ -55,34 +57,44 @@ export const DataDisplayRoutes: Routes = [
         path: 'badge-icon'
     },
     {
-        component: BadgeSample2Component,
-        data: dataDisplayRoutesData['badge-sample-2'],
-        path: 'badge-sample-2'
+        component: BadgeOverviewComponent,
+        data: dataDisplayRoutesData['badge-overview'],
+        path: 'badge-overview'
     },
     {
-        component: BadgeSample3Component,
-        data: dataDisplayRoutesData['badge-sample-3'],
-        path: 'badge-sample-3'
+        component: BadgeShapeComponent,
+        data: dataDisplayRoutesData['badge-shape'],
+        path: 'badge-shape'
+    },
+    {
+        component: BadgeVariantsComponent,
+        data: dataDisplayRoutesData['badge-variants'],
+        path: 'badge-variants'
+    },
+    {
+        component: BadgeListComponent,
+        data: dataDisplayRoutesData['badge-list'],
+        path: 'badge-list'
     },
     {
         component: BadgeOutlinedComponent,
-        data: dataDisplayRoutesData['badge-outlined-sample'],
-        path: 'badge-outlined-sample'
+        data: dataDisplayRoutesData['badge-outlined'],
+        path: 'badge-outlined'
     },
     {
-        component: BadgeDotSampleComponent,
-        data: dataDisplayRoutesData['badge-dot-sample'],
-        path: 'badge-dot-sample'
+        component: BadgeDotComponent,
+        data: dataDisplayRoutesData['badge-dot'],
+        path: 'badge-dot'
     },
     {
-        component: BadgeStylingSampleComponent,
-        data: dataDisplayRoutesData['badge-styling-sample'],
-        path: 'badge-styling-sample'
+        component: BadgeStylingComponent,
+        data: dataDisplayRoutesData['badge-styling'],
+        path: 'badge-styling'
     },
     {
-        component: BadgeTailwindStylingSampleComponent,
-        data: dataDisplayRoutesData['badge-tailwind-styling-sample'],
-        path: 'badge-tailwind-styling-sample'
+        component: BadgeTailwindStylingComponent,
+        data: dataDisplayRoutesData['badge-tailwind-styling'],
+        path: 'badge-tailwind-styling'
     },
     {
         component: ChipAreaSampleComponent,

From e61002b61472984b1abd3d4623bc741b6956fc88 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Mon, 20 Jul 2026 19:17:51 +0300
Subject: [PATCH 2/8] fix(badge): update the badge config generator

---
 live-editing/configs/BadgeConfigGenerator.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts
index 1d76204bd1..c837a53a4d 100644
--- a/live-editing/configs/BadgeConfigGenerator.ts
+++ b/live-editing/configs/BadgeConfigGenerator.ts
@@ -31,10 +31,9 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge overview
+        // badge variants
         configs.push(new Config({
             component: 'BadgeVariantsComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));
@@ -58,7 +57,7 @@ export class BadgeConfigGenerator implements IConfigGenerator {
         // badge dot
         configs.push(new Config({
             component: 'BadgeDotComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot/badge-dot.component.scss"],
+            additionalFiles: ["src/app/data-display/badge/badge-dot/badge-dot.component.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));

From 0cf58fca11ba42a771502bf1ac885d4296065cb2 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Tue, 21 Jul 2026 17:30:00 +0300
Subject: [PATCH 3/8] feat(badge): remove list sample

---
 live-editing/configs/BadgeConfigGenerator.ts  |  8 -------
 .../badge-list/badge-list.component.html      | 18 ---------------
 .../badge-list/badge-list.component.scss      | 18 ---------------
 .../badge/badge-list/badge-list.component.ts  | 22 -------------------
 .../data-display/data-display-routes-data.ts  |  1 -
 src/app/data-display/data-display.routes.ts   |  6 -----
 6 files changed, 73 deletions(-)
 delete mode 100644 src/app/data-display/badge/badge-list/badge-list.component.html
 delete mode 100644 src/app/data-display/badge/badge-list/badge-list.component.scss
 delete mode 100644 src/app/data-display/badge/badge-list/badge-list.component.ts

diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts
index c837a53a4d..bd709f9c4c 100644
--- a/live-editing/configs/BadgeConfigGenerator.ts
+++ b/live-editing/configs/BadgeConfigGenerator.ts
@@ -38,14 +38,6 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
-        // badge list
-        configs.push(new Config({
-            component: 'BadgeListComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
-            appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-display/badge/"
-        }));
-
         // badge styling
         configs.push(new Config({
             component: 'BadgeStylingComponent',
diff --git a/src/app/data-display/badge/badge-list/badge-list.component.html b/src/app/data-display/badge/badge-list/badge-list.component.html
deleted file mode 100644
index 36c6a560c2..0000000000
--- a/src/app/data-display/badge/badge-list/badge-list.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<igx-list>
-  <igx-list-item [isHeader]="true">
-    Team Members (4)
-  </igx-list-item>
-  @for (member of members; track member) {
-    <igx-list-item>
-      <div class="wrapper">
-        <div>
-          <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-          <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
-        </div>
-        <div class="contact-container">
-          <span class="contact-name">{{ member.name }}</span>
-        </div>
-      </div>
-    </igx-list-item>
-  }
-</igx-list>
diff --git a/src/app/data-display/badge/badge-list/badge-list.component.scss b/src/app/data-display/badge/badge-list/badge-list.component.scss
deleted file mode 100644
index c5aee48558..0000000000
--- a/src/app/data-display/badge/badge-list/badge-list.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.wrapper {
-    display: flex;
-    flex-direction: row;
-}
-
-.contact-name {
-    font-weight: 600;
-}
-
-.contact-container {
-    margin-left: 20px;
-}
-
-.badge-style {
-  position: absolute;
-  bottom: 2.5px;
-  left: 40px;
-}
diff --git a/src/app/data-display/badge/badge-list/badge-list.component.ts b/src/app/data-display/badge/badge-list/badge-list.component.ts
deleted file mode 100644
index 3a3a3406b3..0000000000
--- a/src/app/data-display/badge/badge-list/badge-list.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Member } from '../model/member.model';
-import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list';
-import { IgxAvatarComponent } from 'igniteui-angular/avatar';
-import { IgxBadgeComponent } from 'igniteui-angular/badge';
-
-
-@Component({
-    selector: 'app-badge-list',
-    styleUrls: ['./badge-list.component.scss'],
-    templateUrl: './badge-list.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
-})
-export class BadgeListComponent {
-  public members: Member[] = [
-    new Member('Terrance Orta', 'online'),
-    new Member('Donna Price', 'online'),
-    new Member('Lisa Landers', 'away'),
-    new Member('Dorothy H. Spencer', 'offline')
-  ];
-}
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index 46c197a5ef..55cc6daa13 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -5,7 +5,6 @@ export const dataDisplayRoutesData = {
     "badge-overview": { displayName: "Overview", parentName: "Badge" },
     "badge-shape": { displayName: "Badge Shape", parentName: "Badge" },
     "badge-variants": { displayName: "Badge Variants", parentName: "Badge" },
-    "badge-list": { displayName: "Badge for List Items", parentName: "Badge" },
     "badge-outlined": { displayName: "Badge Outlined", parentName: "Badge" },
     "badge-dot": { displayName: "Badge Dot", parentName: "Badge" },
     "badge-styling": { displayName: "Badge Styling", parentName: "Badge" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index d323ab912f..160fa580e0 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -2,7 +2,6 @@ import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
 import { BadgeOverviewComponent } from './badge/badge-overview/badge-overview.component';
 import { BadgeShapeComponent } from './badge/badge-shape/badge-shape.component';
 import { BadgeVariantsComponent } from './badge/badge-variants/badge-variants.component';
-import { BadgeListComponent } from './badge/badge-list/badge-list.component';
 import { BadgeOutlinedComponent } from './badge/badge-outlined/badge-outlined.component';
 import { BadgeDotComponent } from './badge/badge-dot/badge-dot.component';
 import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.component';
@@ -71,11 +70,6 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['badge-variants'],
         path: 'badge-variants'
     },
-    {
-        component: BadgeListComponent,
-        data: dataDisplayRoutesData['badge-list'],
-        path: 'badge-list'
-    },
     {
         component: BadgeOutlinedComponent,
         data: dataDisplayRoutesData['badge-outlined'],

From 6e243be8a35884d2d97ca3e44465b5c897a80654 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Mon, 27 Jul 2026 16:21:33 +0300
Subject: [PATCH 4/8] feat(docs): update badge sample

---
 live-editing/configs/BadgeConfigGenerator.ts  | 14 ++++++++++++
 .../badge-size/badge-size.component.html      | 14 ++++++++++++
 .../badge-size/badge-size.component.scss      | 22 +++++++++++++++++++
 .../badge/badge-size/badge-size.component.ts  | 11 ++++++++++
 .../badge-type/badge-type.component.html      | 14 ++++++++++++
 .../badge-type/badge-type.component.scss      | 18 +++++++++++++++
 .../badge/badge-type/badge-type.component.ts  | 11 ++++++++++
 .../data-display/data-display-routes-data.ts  |  2 ++
 src/app/data-display/data-display.routes.ts   | 12 ++++++++++
 9 files changed, 118 insertions(+)
 create mode 100644 src/app/data-display/badge/badge-size/badge-size.component.html
 create mode 100644 src/app/data-display/badge/badge-size/badge-size.component.scss
 create mode 100644 src/app/data-display/badge/badge-size/badge-size.component.ts
 create mode 100644 src/app/data-display/badge/badge-type/badge-type.component.html
 create mode 100644 src/app/data-display/badge/badge-type/badge-type.component.scss
 create mode 100644 src/app/data-display/badge/badge-type/badge-type.component.ts

diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts
index bd709f9c4c..0015cbc597 100644
--- a/live-editing/configs/BadgeConfigGenerator.ts
+++ b/live-editing/configs/BadgeConfigGenerator.ts
@@ -24,6 +24,20 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
+        // badge size
+        configs.push(new Config({
+            component: 'BadgeSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
+        // badge type
+        configs.push(new Config({
+            component: 'BadgeTypeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
         // badge shape
         configs.push(new Config({
             component: 'BadgeShapeComponent',
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.html b/src/app/data-display/badge/badge-size/badge-size.component.html
new file mode 100644
index 0000000000..966d353cc2
--- /dev/null
+++ b/src/app/data-display/badge/badge-size/badge-size.component.html
@@ -0,0 +1,14 @@
+<div class="badge-size">
+    <div class="badge-size-item">
+        <span>Large</span>
+        <igx-badge type="primary" class="badge-large"></igx-badge>
+    </div>
+    <div class="badge-size-item">
+        <span>Medium</span>
+        <igx-badge type="primary" class="badge-medium"></igx-badge>
+    </div>
+    <div class="badge-size-item">
+        <span>Small</span>
+        <igx-badge type="primary" class="badge-small"></igx-badge>
+    </div>
+</div>
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss
new file mode 100644
index 0000000000..49874e01a7
--- /dev/null
+++ b/src/app/data-display/badge/badge-size/badge-size.component.scss
@@ -0,0 +1,22 @@
+.badge-size {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 16px;
+}
+
+.badge-size-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.badge-size-item span {
+    color: var(--ig-gray-700);
+    font-size: 14px;
+}
+
+.badge-large { --ig-size: var(--ig-size-large); }
+.badge-medium { --ig-size: var(--ig-size-medium); }
+.badge-small { --ig-size: var(--ig-size-small); }
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.ts b/src/app/data-display/badge/badge-size/badge-size.component.ts
new file mode 100644
index 0000000000..99492a57a9
--- /dev/null
+++ b/src/app/data-display/badge/badge-size/badge-size.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+
+@Component({
+    selector: 'app-badge-size',
+    templateUrl: './badge-size.component.html',
+    styleUrls: ['./badge-size.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxBadgeComponent]
+})
+export class BadgeSizeComponent { }
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.html b/src/app/data-display/badge/badge-type/badge-type.component.html
new file mode 100644
index 0000000000..0ce3a21fa9
--- /dev/null
+++ b/src/app/data-display/badge/badge-type/badge-type.component.html
@@ -0,0 +1,14 @@
+<div class="badge-type">
+    <div class="badge-type-item">
+        <span>Number</span>
+        <igx-badge value="12" type="primary"></igx-badge>
+    </div>
+    <div class="badge-type-item">
+        <span>Icon</span>
+        <igx-badge icon="check" type="primary"></igx-badge>
+    </div>
+    <div class="badge-type-item">
+        <span>Dot</span>
+        <igx-badge dot type="primary"></igx-badge>
+    </div>
+</div>
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss
new file mode 100644
index 0000000000..306a6e5a1e
--- /dev/null
+++ b/src/app/data-display/badge/badge-type/badge-type.component.scss
@@ -0,0 +1,18 @@
+.badge-type {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 16px;
+}
+
+.badge-type-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.badge-type-item span {
+    color: var(--ig-gray-700);
+    font-size: 14px;
+}
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.ts b/src/app/data-display/badge/badge-type/badge-type.component.ts
new file mode 100644
index 0000000000..25555b5c5a
--- /dev/null
+++ b/src/app/data-display/badge/badge-type/badge-type.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+
+@Component({
+    selector: 'app-badge-type',
+    templateUrl: './badge-type.component.html',
+    styleUrls: ['./badge-type.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxBadgeComponent]
+})
+export class BadgeTypeComponent { }
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index 55cc6daa13..b5d24e6205 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -3,6 +3,8 @@
 export const dataDisplayRoutesData = {
     "badge-icon": { displayName: "Badge Icon Sample", parentName: "Badge" },
     "badge-overview": { displayName: "Overview", parentName: "Badge" },
+    "badge-size": { displayName: "Badge Size", parentName: "Badge" },
+    "badge-type": { displayName: "Badge Type", parentName: "Badge" },
     "badge-shape": { displayName: "Badge Shape", parentName: "Badge" },
     "badge-variants": { displayName: "Badge Variants", parentName: "Badge" },
     "badge-outlined": { displayName: "Badge Outlined", parentName: "Badge" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 160fa580e0..514fb69438 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -1,5 +1,7 @@
 import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
 import { BadgeOverviewComponent } from './badge/badge-overview/badge-overview.component';
+import { BadgeSizeComponent } from './badge/badge-size/badge-size.component';
+import { BadgeTypeComponent } from './badge/badge-type/badge-type.component';
 import { BadgeShapeComponent } from './badge/badge-shape/badge-shape.component';
 import { BadgeVariantsComponent } from './badge/badge-variants/badge-variants.component';
 import { BadgeOutlinedComponent } from './badge/badge-outlined/badge-outlined.component';
@@ -60,6 +62,16 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['badge-overview'],
         path: 'badge-overview'
     },
+    {
+        component: BadgeSizeComponent,
+        data: dataDisplayRoutesData['badge-size'],
+        path: 'badge-size'
+    },
+    {
+        component: BadgeTypeComponent,
+        data: dataDisplayRoutesData['badge-type'],
+        path: 'badge-type'
+    },
     {
         component: BadgeShapeComponent,
         data: dataDisplayRoutesData['badge-shape'],

From c0ef40c909d5cdc01641fff9fa20190f508bf41f Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Mon, 3 Aug 2026 17:55:55 +0300
Subject: [PATCH 5/8] feat(badge): update the samples content

---
 .../badge/badge-dot/badge-dot.component.html  |  45 +++++-
 .../badge/badge-dot/badge-dot.component.scss  | 138 ++++++++++++++++--
 .../badge/badge-dot/badge-dot.component.ts    |  21 ++-
 .../badge-icon/badge-icon.component.html      |  21 ++-
 .../badge-icon/badge-icon.component.scss      |  61 +++++++-
 .../badge/badge-icon/badge-icon.component.ts  |  19 ++-
 .../badge-outlined.component.html             |  35 ++++-
 .../badge-outlined.component.scss             | 117 ++++++++++++---
 .../badge-outlined.component.ts               |  11 +-
 .../badge-overview.component.html             |  20 ++-
 .../badge-overview.component.scss             |  71 +++++++--
 .../badge-overview.component.ts               |   4 +-
 .../badge-shape/badge-shape.component.html    |  15 +-
 .../badge-shape/badge-shape.component.scss    |  27 +++-
 .../badge-size/badge-size.component.html      |  24 +--
 .../badge-size/badge-size.component.scss      |  18 ++-
 .../badge-styling.component.html              |  36 ++---
 .../badge-styling.component.scss              |  53 ++++++-
 .../badge-styling/badge-styling.component.ts  |  13 +-
 .../badge/badge-styling/layout.scss           |  52 ++++---
 .../badge-tailwind-styling.component.html     |  36 ++---
 .../badge-tailwind-styling.component.scss     |  14 ++
 .../badge-tailwind-styling.component.ts       |  13 +-
 .../badge/badge-tailwind-styling/layout.scss  |  43 +++---
 .../badge-type/badge-type.component.html      |  19 ++-
 .../badge-type/badge-type.component.scss      |  33 ++++-
 .../badge/badge-type/badge-type.component.ts  |   3 +-
 .../badge-variants.component.html             |  39 ++++-
 .../badge-variants.component.scss             |  47 +++++-
 29 files changed, 829 insertions(+), 219 deletions(-)

diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.html b/src/app/data-display/badge/badge-dot/badge-dot.component.html
index 798c7e17ae..ef4282e831 100644
--- a/src/app/data-display/badge/badge-dot/badge-dot.component.html
+++ b/src/app/data-display/badge/badge-dot/badge-dot.component.html
@@ -1,4 +1,43 @@
-<div class="wrapper">
-    <igx-avatar icon="face" shape="rounded" size="small"></igx-avatar>
-    <igx-badge dot type="success"></igx-badge>
+<div class="badge-dot">
+    <div class="dot-example icon-example">
+        <div class="icon-circle">
+            <igx-icon>notifications</igx-icon>
+        </div>
+        <igx-badge dot outlined type="error"></igx-badge>
+    </div>
+    <div class="dot-example notifications-card">
+        @for (item of notifications; track item.title) {
+            <div class="notification-row">
+                <span class="row-indicator">
+                    @if (item.unread) {
+                        <igx-badge dot type="info"></igx-badge>
+                    }
+                </span>
+                <span class="row-title">{{ item.title }}</span>
+                <span class="row-time" [class.unread]="item.unread">{{ item.time }}</span>
+                <igx-icon class="row-chevron">chevron_right</igx-icon>
+            </div>
+        }
+    </div>
+    <div class="dot-example avatar-example">
+        <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+        <igx-badge dot outlined type="error"></igx-badge>
+    </div>
+    <div class="dot-example nav-card">
+        @for (tab of tabs; track tab.label) {
+            <div class="nav-item" [class.active]="tab.active">
+                <span class="nav-icon">
+                    @if (tab.icon === 'facebookMessenger') {
+                        <igx-icon name="facebookMessenger"></igx-icon>
+                    } @else {
+                        <igx-icon [name]="tab.icon"></igx-icon>
+                    }
+                    @if (tab.hasUpdates) {
+                        <igx-badge dot type="info"></igx-badge>
+                    }
+                </span>
+                <span class="nav-label">{{ tab.label }}</span>
+            </div>
+        }
+    </div>
 </div>
diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
index da1d082f57..93a46a95cd 100644
--- a/src/app/data-display/badge/badge-dot/badge-dot.component.scss
+++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
@@ -1,17 +1,127 @@
-.wrapper {
+igx-badge {
+  --ig-size: var(--ig-size-small);
+}
+
+igx-avatar {
+  --size: 36px;
+}
+
+.icon-example igx-badge,
+.avatar-example igx-badge,
+.nav-icon igx-badge {
+  position: absolute;
+}
+
+.icon-example igx-badge,
+.avatar-example igx-badge {
+  inset-block-start: 0;
+  inset-inline-end: -2px;
+}
+
+.nav-icon igx-badge {
+  inset-block-start: -2px;
+  inset-inline-end: -6px;
+}
+
+.badge-dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 40px;
+  padding: 24px 16px;
+}
+
+.dot-example {
+  position: relative;
+}
+
+.icon-example,
+.avatar-example,
+.icon-circle {
+  display: flex;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+}
+
+.icon-circle {
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--ig-gray-200);
+  color: var(--ig-gray-800);
+}
+
+.notifications-card,
+.nav-card {
+  background: var(--ig-surface-500);
+  border-radius: 4px;
+  box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12);
+}
+
+.notifications-card {
+  min-width: 272px;
+  padding: 8px 0;
+}
+
+.notification-row {
   display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: var(--ig-gray-900);
+}
+
+.row-indicator {
+  display: inline-flex;
+  justify-content: center;
+  width: 12px;
+}
+
+.row-title {
+  flex: 1;
+}
+
+.row-time {
+  font-size: 13px;
+  color: var(--ig-gray-900);
+}
+
+.row-time.unread {
+  color: var(--ig-primary-500);
+  font-weight: 600;
+}
+
+.row-chevron {
+  --ig-size: 1;
+
+  color: var(--ig-gray-600);
+  font-size: 18px;
+}
+
+.nav-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 56px;
+  color: var(--ig-gray-700);
+  font-size: 12px;
+}
+
+.nav-item.active {
+  color: var(--ig-primary-500);
+}
+
+.nav-icon {
   position: relative;
-  margin: 15px 0 0 15px;
-
-  igx-avatar {
-    anchor-name: --avatar;
-  }
-
-  igx-badge {
-    position: absolute;
-    position-anchor: --avatar;
-    bottom: anchor(--avatar top);
-    left: anchor(right);
-    transform: translate(-75%, 75%);
-  }
+  display: inline-flex;
 }
diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.ts b/src/app/data-display/badge/badge-dot/badge-dot.component.ts
index a3877635bc..a696989e9d 100644
--- a/src/app/data-display/badge/badge-dot/badge-dot.component.ts
+++ b/src/app/data-display/badge/badge-dot/badge-dot.component.ts
@@ -1,12 +1,29 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
+import { IgxIconComponent, IgxIconService} from 'igniteui-angular/icon';
+import { facebookMessenger } from '@igniteui/material-icons-extended';
 
 @Component({
     selector: 'app-badge-dot',
     styleUrls: ['./badge-dot.component.scss'],
     templateUrl: './badge-dot.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxAvatarComponent, IgxBadgeComponent]
+    imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent]
 })
-export class BadgeDotComponent { }
+export class BadgeDotComponent {
+    constructor(private iconService: IgxIconService) {
+        this.iconService.addSvgIconFromText('facebookMessenger', facebookMessenger.value);
+    }
+
+    public notifications = [
+        { title: 'Contract renewal', time: '09:12', unread: true },
+        { title: 'Weekly digest', time: 'Yesterday', unread: false }
+    ];
+
+    public tabs = [
+        { label: 'Home', icon: 'home', active: true, hasUpdates: false },
+        { label: 'Chat', icon: 'facebookMessenger', active: false, hasUpdates: true },
+        { label: 'Profile', icon: 'person', active: false, hasUpdates: false }
+    ];
+}
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.html b/src/app/data-display/badge/badge-icon/badge-icon.component.html
index 3969983d30..b49c231b15 100644
--- a/src/app/data-display/badge/badge-icon/badge-icon.component.html
+++ b/src/app/data-display/badge/badge-icon/badge-icon.component.html
@@ -1,4 +1,17 @@
-<div class="wrapper">
-    <igx-avatar icon="face" size="small" shape="rounded"></igx-avatar>
-    <igx-badge type="error" icon="heart-monitor" iconSet="imx-icons"></igx-badge>
-</div>
\ No newline at end of file
+<div class="badge-icon">
+    @for (item of badges; track item.label) {
+        <div class="badge-icon-item">
+            <div class="icon-wrapper">
+                <igx-badge [icon]="item.icon" [type]="item.type"></igx-badge>
+            </div>
+            <span>{{ item.label }}</span>
+        </div>
+    }
+    <div class="badge-icon-item">
+        <div class="icon-wrapper avatar-wrapper">
+            <igx-avatar initials="AZ" shape="circle" size="small"></igx-avatar>
+            <igx-badge icon="close" type="error" outlined ></igx-badge>
+        </div>
+        <span>on avatar</span>
+    </div>
+</div>
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
index dbb6d9c2b7..10950860d0 100644
--- a/src/app/data-display/badge/badge-icon/badge-icon.component.scss
+++ b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
@@ -1,10 +1,59 @@
-.wrapper {
-  position: relative;
-  margin: 15px 0 0 15px;
+igx-avatar {
+  --size: 40px;
+  --ig-avatar-background: var(--ig-gray-700);
+  --ig-avatar-color: var(--ig-gray-50);
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
 }
 
-igx-badge {
+.icon-wrapper > igx-badge {
+  --ig-size: var(--ig-size-medium);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.avatar-wrapper igx-badge {
+  --ig-size: var(--ig-size-small);
   position: absolute;
-  bottom: 0;
-  left: 28px;
+  inset-block-start: -4px;
+  inset-inline-end: -6px;
+}
+
+.badge-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  gap: 32px;
+  padding: 24px 16px;
+}
+
+.badge-icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  min-width: 56px;
+}
+
+.badge-icon-item span {
+  color: var(--ig-gray-700);
+  font-size: 12px;
+  transform: translateY(4px);
+}
+
+.avatar-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
 }
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.ts b/src/app/data-display/badge/badge-icon/badge-icon.component.ts
index fd41beb127..85c94b8e1a 100644
--- a/src/app/data-display/badge/badge-icon/badge-icon.component.ts
+++ b/src/app/data-display/badge/badge-icon/badge-icon.component.ts
@@ -1,6 +1,4 @@
-import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
-import { heartMonitor } from '@igniteui/material-icons-extended';
-import { IgxIconService } from 'igniteui-angular/icon';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
@@ -11,11 +9,12 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeIconComponent implements OnInit {
-    protected _iconService = inject(IgxIconService);
-
-
-    public ngOnInit() {
-        this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
-    }
+export class BadgeIconComponent {
+    public badges = [
+        { icon: 'check', type: 'success', label: 'check' },
+        { icon: 'favorite_border', type: 'error', label: 'favorite' },
+        { icon: 'notifications', type: 'info', label: 'notification' },
+        { icon: 'star_border', type: 'warning', label: 'star' },
+        { icon: 'settings', type: 'info', label: 'settings' }
+    ];
 }
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html
index 3a7e6f397a..c260ae5624 100644
--- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html
@@ -1,7 +1,28 @@
-<section class="wrapper">
-  <header>
-    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-    <igx-badge outlined type="error"></igx-badge>
-  </header>
-  <span>Terrance Orta</span>
-</section>
+<div class="badge-outlined">
+  <div class="outlined-example">
+    <div class="icon-circle">
+      <igx-icon>favorite_border</igx-icon>
+    </div>
+    <igx-badge value="23" type="info" outlined></igx-badge>
+  </div>
+  <div class="outlined-example">
+    <igx-avatar initials="AZ" shape="rounded" size="small"></igx-avatar>
+    <igx-badge icon="close" type="error" outlined></igx-badge>
+  </div>
+  <div class="steps">
+    @for (step of steps; track step.label) {
+      @if (!$first) {
+        <span class="step-connector" [class.pending]="step.pending"></span>
+      }
+      <div class="step">
+        <div class="step-marker">
+          <span class="step-circle" [class.pending]="step.pending">{{ step.index }}</span>
+          @if (step.current) {
+            <igx-badge dot type="info" outlined></igx-badge>
+          }
+        </div>
+        <span class="step-label">{{ step.label }}</span>
+      </div>
+    }
+  </div>
+</div>
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
index 21db08ffe6..4c857826e0 100644
--- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
@@ -1,33 +1,116 @@
+igx-badge {
+  --ig-size: var(--ig-size-small);
+}
+
+igx-avatar {
+  --size: 40px;
+  --ig-avatar-background: var(--ig-gray-700);
+  --ig-avatar-color: var(--ig-gray-50);
+}
+
+:host ::ng-deep .outlined-example igx-avatar igx-icon {
+  color: var(--ig-gray-50);
+}
+
+.outlined-example:nth-child(2) igx-badge {
+  inset-block-start: auto;
+  inset-block-end: -6px;
+  inset-inline-end: -6px;
+}
+
+.step-marker igx-badge {
+  position: absolute;
+  inset-block-start: -3px;
+  inset-inline-end: -3px;
+}
+
+.outlined-example igx-badge {
+  position: absolute;
+  inset-block-start: -6px;
+  inset-inline-end: -10px;
+}
+
+.icon-circle igx-icon {
+  font-size: 20px;
+}
+
 :host {
   display: block;
   padding-inline: 1rem;
 }
 
-.wrapper {
+.badge-outlined {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 40px;
+  padding: 24px 16px;
+}
+
+.outlined-example {
   position: relative;
   display: flex;
+}
+
+.icon-circle,
+.step-circle {
+  display: flex;
   align-items: center;
-  margin-block: 1rem;
-  width: fit-content;
-  padding: 0.5rem;
-  gap: 0.5rem;
-  border: 1px solid var(--ig-gray-300);
-  border-radius: .25rem;
+  justify-content: center;
+  border-radius: 50%;
 }
 
-igx-avatar {
-    anchor-name: --avatar;
+.icon-circle {
+  width: 36px;
+  height: 36px;
+  background: var(--ig-gray-200);
+  color: var(--ig-gray-800);
 }
 
-igx-badge {
-  --size: 1rem;
+.steps {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
 
-  position: absolute;
-  inset-block-end: anchor(--avatar bottom);
-  inset-inline-end: anchor(--avatar right);
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
 }
 
-span {
-  display: block;
-  font-weight: 600;
+.step-marker {
+  position: relative;
+  display: flex;
+}
+
+.step-circle {
+  width: 26px;
+  height: 26px;
+  background: var(--ig-gray-900);
+  color: var(--ig-gray-50);
+  font-size: 12px;
+}
+
+.step-circle.pending {
+  background: var(--ig-gray-200);
+  color: var(--ig-gray-800);
+}
+
+.step-connector {
+  width: 56px;
+  margin-block-start: 13px;
+  border-block-start: 1px solid var(--ig-gray-900);
+}
+
+.step-connector.pending {
+  border-block-start-style: dashed;
+  border-block-start-color: var(--ig-gray-400);
+}
+
+.step-label {
+  color: var(--ig-gray-700);
+  font-size: 13px;
 }
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts
index 5f99c356b5..6b2013340f 100644
--- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts
@@ -1,12 +1,19 @@
 import { Component } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 
 @Component({
   selector: 'app-badge-outlined',
   styleUrls: ['./badge-outlined.component.scss'],
   templateUrl: './badge-outlined.component.html',
-  imports: [IgxAvatarComponent, IgxBadgeComponent]
+  imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent]
 })
 
-export class BadgeOutlinedComponent { }
+export class BadgeOutlinedComponent {
+  public steps = [
+    { index: 1, label: 'Orders', current: false, pending: false },
+    { index: 2, label: 'Payment', current: true, pending: false },
+    { index: 3, label: 'Shipping', current: false, pending: true }
+  ];
+}
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.html b/src/app/data-display/badge/badge-overview/badge-overview.component.html
index d1a668e776..2505eae1d5 100644
--- a/src/app/data-display/badge/badge-overview/badge-overview.component.html
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.html
@@ -1,4 +1,18 @@
-<div class="wrapper">
-  <igx-avatar initials="JD"></igx-avatar>
-  <igx-badge outlined></igx-badge>
+<div class="badge-overview">
+  <div class="badge-example avatar-example">
+    <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+    <igx-badge icon="check" outlined type="success"></igx-badge>
+  </div>
+  <div class="badge-example icon-example">
+    <igx-icon>mail</igx-icon>
+    <igx-badge value="2" outlined type="error"></igx-badge>
+  </div>
+  <div class="badge-example event-example">
+    <igx-chip>Events</igx-chip>
+    <igx-badge value="new" outlined type="info"></igx-badge>
+  </div>
+  <div class="badge-example notification-example">
+    <igx-icon>notifications</igx-icon>
+    <igx-badge dot outlined type="error"></igx-badge>
+  </div>
 </div>
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss
index d228601be8..1155a40e84 100644
--- a/src/app/data-display/badge/badge-overview/badge-overview.component.scss
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss
@@ -1,18 +1,69 @@
-.wrapper {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
+igx-avatar {
+  --size: 40px;
+}
+
+igx-icon {
+  color: var(--ig-gray-700);
+  font-size: 1.5rem;
 }
 
 igx-badge {
-  --size: 18px;
+  --ig-size: var(--ig-size-small);
+
+  position: absolute;
+  inset-block-start: -0.15rem;
+  inset-inline-end: -0.15rem;
+}
+
+.avatar-example igx-badge {
+  inset-block-start: auto;
+  inset-block-end: -0.15rem;
+  inset-inline-end: -0.15rem;
+}
+
+.event-example igx-chip {
+  --ig-size: var(--ig-size-large);
+}
+
+.event-example igx-badge {
+  inset-block-start: 0;
+  inset-inline-end: -0.8rem;
+}
 
+.icon-example igx-badge {
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+.notification-example igx-badge {
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+}
+
+.event-example {
+  min-width: auto;
+}
+
+.badge-overview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  min-height: 7rem;
+  padding: 1rem;
+}
+
+.badge-example {
   position: relative;
-  right: 10px;
-  top: -15px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
 }
 
-igx-avatar {
-  --size: 45px;
-  margin-top: 6px;
+.icon-example,
+.notification-example {
+  width: 2.5rem;
+  height: 2.5rem;
 }
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.ts b/src/app/data-display/badge/badge-overview/badge-overview.component.ts
index 9049e07c26..0670769791 100644
--- a/src/app/data-display/badge/badge-overview/badge-overview.component.ts
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.ts
@@ -1,12 +1,14 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
+import { IgxChipComponent } from 'igniteui-angular/chips';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 
 @Component({
     selector: 'app-badge-overview',
     templateUrl: './badge-overview.component.html',
     styleUrls: ['./badge-overview.component.scss'],
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxAvatarComponent, IgxBadgeComponent]
+    imports: [IgxAvatarComponent, IgxBadgeComponent, IgxChipComponent, IgxIconComponent]
 })
 export class BadgeOverviewComponent { }
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.html b/src/app/data-display/badge/badge-shape/badge-shape.component.html
index c4c5d326ed..181f4727ee 100644
--- a/src/app/data-display/badge/badge-shape/badge-shape.component.html
+++ b/src/app/data-display/badge/badge-shape/badge-shape.component.html
@@ -1,3 +1,14 @@
-<div class="wrapper">
-  <igx-badge shape="square"></igx-badge>
+<div class="badge-shape">
+  <div class="badge-shape-row">
+    <span class="row-label">Rounded</span>
+    <igx-badge icon="check" type="success" shape="rounded"></igx-badge>
+    <igx-badge value="2" type="success" shape="rounded"></igx-badge>
+    <igx-badge icon="check" type="success" shape="rounded" class="badge-small"></igx-badge>
+  </div>
+  <div class="badge-shape-row">
+    <span class="row-label">Square</span>
+    <igx-badge icon="check" type="info" shape="square"></igx-badge>
+    <igx-badge value="2" type="info" shape="square"></igx-badge>
+    <igx-badge icon="check" type="info" shape="square" class="badge-small"></igx-badge>
+  </div>
 </div>
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
index 1910721299..e2aae09a26 100644
--- a/src/app/data-display/badge/badge-shape/badge-shape.component.scss
+++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
@@ -1,3 +1,26 @@
-.wrapper {
-  padding: 16px;
+.badge-shape {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 24px 16px;
+}
+
+.badge-shape-row {
+  display: grid;
+  grid-template-columns: 80px 40px 40px 40px;
+  align-items: center;
+  justify-items: center;
+  gap: 8px;
+}
+
+.row-label {
+  justify-self: end;
+  color: var(--ig-gray-700);
+  font-size: 14px;
+}
+
+.badge-small {
+  --ig-size: var(--ig-size-small);
 }
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.html b/src/app/data-display/badge/badge-size/badge-size.component.html
index 966d353cc2..f18e860e64 100644
--- a/src/app/data-display/badge/badge-size/badge-size.component.html
+++ b/src/app/data-display/badge/badge-size/badge-size.component.html
@@ -1,14 +1,20 @@
 <div class="badge-size">
-    <div class="badge-size-item">
-        <span>Large</span>
-        <igx-badge type="primary" class="badge-large"></igx-badge>
+    <div class="badge-size-row badge-small">
+        <span class="row-label">Small</span>
+        <igx-badge dot type="error"></igx-badge>
+        <igx-badge value="2" type="info"></igx-badge>
+        <igx-badge icon="check" type="success"></igx-badge>
     </div>
-    <div class="badge-size-item">
-        <span>Medium</span>
-        <igx-badge type="primary" class="badge-medium"></igx-badge>
+    <div class="badge-size-row badge-medium">
+        <span class="row-label">Medium</span>
+        <igx-badge dot type="error"></igx-badge>
+        <igx-badge value="2" type="info"></igx-badge>
+        <igx-badge icon="check" type="success"></igx-badge>
     </div>
-    <div class="badge-size-item">
-        <span>Small</span>
-        <igx-badge type="primary" class="badge-small"></igx-badge>
+    <div class="badge-size-row badge-large">
+        <span class="row-label">Large</span>
+        <igx-badge dot type="error"></igx-badge>
+        <igx-badge value="2" type="info"></igx-badge>
+        <igx-badge icon="check" type="success"></igx-badge>
     </div>
 </div>
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss
index 49874e01a7..020f304da3 100644
--- a/src/app/data-display/badge/badge-size/badge-size.component.scss
+++ b/src/app/data-display/badge/badge-size/badge-size.component.scss
@@ -1,18 +1,22 @@
 .badge-size {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 32px;
-    padding: 16px;
+    justify-content: center;
+    gap: 20px;
+    padding: 24px 16px;
 }
 
-.badge-size-item {
-    display: flex;
-    flex-direction: column;
+.badge-size-row {
+    display: grid;
+    grid-template-columns: 80px 32px 40px 40px;
     align-items: center;
-    gap: 12px;
+    justify-items: center;
+    gap: 8px;
 }
 
-.badge-size-item span {
+.row-label {
+    justify-self: end;
     color: var(--ig-gray-700);
     font-size: 14px;
 }
diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.html b/src/app/data-display/badge/badge-styling/badge-styling.component.html
index 18cf6c5468..11d9227e08 100644
--- a/src/app/data-display/badge/badge-styling/badge-styling.component.html
+++ b/src/app/data-display/badge/badge-styling/badge-styling.component.html
@@ -1,18 +1,18 @@
-<igx-list>
-  <igx-list-item [isHeader]="true">
-    Team Members (4)
-  </igx-list-item>
-  @for (member of members; track member) {
-    <igx-list-item>
-      <div class="wrapper">
-        <div>
-          <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-          <igx-badge [icon]="member.icon" shape="square" class="badge-style"></igx-badge>
-        </div>
-        <div class="contact-container">
-          <span class="contact-name">{{ member.name }}</span>
-        </div>
-      </div>
-    </igx-list-item>
-  }
-</igx-list>
+<div class="badge-styling">
+  <div class="styling-item green">
+    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+    <igx-badge icon="photo_camera" outlined class="badge-teal"></igx-badge>
+  </div>
+  <div class="styling-item">
+    <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+    <igx-badge icon="star_border" outlined class="badge-amber"></igx-badge>
+  </div>
+  <div class="styling-item pink">
+    <igx-avatar icon="favorite_border" shape="circle" size="small"></igx-avatar>
+    <igx-badge value="2" outlined class="badge-magenta"></igx-badge>
+  </div>
+  <div class="styling-item">
+    <igx-avatar src="assets/images/avatar/10.jpg" shape="rounded" size="small"></igx-avatar>
+    <igx-badge dot outlined class="badge-lime"></igx-badge>
+  </div>
+</div>
diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.scss b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
index e0a0507010..2d0f09b168 100644
--- a/src/app/data-display/badge/badge-styling/badge-styling.component.scss
+++ b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
@@ -1,11 +1,50 @@
 @use "layout.scss";
-@use "igniteui-angular/theming" as *;
 
-$custom-badge-theme: badge-theme(
-  $background-color: #57a5cd,
-  $border-radius: 4px
-);
+igx-badge {
+  --ig-size: var(--ig-size-small);
+}
+
+:host ::ng-deep .badge-teal igx-icon,
+:host ::ng-deep .badge-amber igx-icon,
+:host ::ng-deep .styling-item.pink igx-avatar igx-icon {
+  color: var(--ig-gray-50);
+}
+
+:host ::ng-deep .badge-teal igx-icon {
+  position: relative;
+}
+
+:host ::ng-deep .badge-teal igx-icon::after {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--ig-success-700);
+  transform: translate(-50%, -50%);
+}
+
+.styling-item.green igx-avatar {
+  --icon-color: var(--ig-success-700);
+}
+
+.styling-item igx-avatar {
+  --size: 40px;
+}
+
+.styling-item.green igx-avatar {
+  --ig-avatar-background: var(--ig-success-200);
+  --ig-avatar-color: var(--ig-gray-50);
+}
+
+.styling-item.pink igx-avatar {
+  --ig-avatar-background: var(--ig-secondary-200);
+  --ig-avatar-color: var(--ig-gray-50);
+}
 
-:host {
-  @include tokens($custom-badge-theme);
+.styling-item igx-badge {
+  position: absolute;
+  inset-block-end: -4px;
+  inset-inline-end: -4px;
 }
diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.ts b/src/app/data-display/badge/badge-styling/badge-styling.component.ts
index 4a8d990d50..92fa57efeb 100644
--- a/src/app/data-display/badge/badge-styling/badge-styling.component.ts
+++ b/src/app/data-display/badge/badge-styling/badge-styling.component.ts
@@ -1,6 +1,4 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Member } from '../model/member.model';
-import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
@@ -10,13 +8,6 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
     styleUrls: ['./badge-styling.component.scss'],
     templateUrl: './badge-styling.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
+    imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeStylingComponent {
-  public members: Member[] = [
-    new Member('Terrance Orta', 'online'),
-    new Member('Donna Price', 'online'),
-    new Member('Lisa Landers', 'away'),
-    new Member('Dorothy H. Spencer', 'offline')
-  ];
-}
+export class BadgeStylingComponent { }
diff --git a/src/app/data-display/badge/badge-styling/layout.scss b/src/app/data-display/badge/badge-styling/layout.scss
index cee5eb7fb1..bb3c01be4c 100644
--- a/src/app/data-display/badge/badge-styling/layout.scss
+++ b/src/app/data-display/badge/badge-styling/layout.scss
@@ -1,18 +1,34 @@
-.wrapper {
-    display: flex;
-    flex-direction: row;
-  }
-  
-  .contact-name {
-    font-weight: 600;
-  }
-  
-  .contact-container{
-    margin-left: 20px;
-  }
-  
-  .badge-style {
-    position: absolute;
-    bottom: 2.5px;
-    left: 40px;
-  }
\ No newline at end of file
+.badge-teal {
+  --background-color: var(--ig-success-700);
+  --border-radius: 50%;
+}
+
+.badge-amber {
+  --background-color: var(--ig-warn-600);
+  --border-radius: 50%;
+}
+
+.badge-magenta {
+  --background-color: var(--ig-secondary-A400);
+  --text-color: var(--ig-secondary-A400-contrast);
+  --border-radius: 50%;
+}
+
+.badge-lime {
+  --background-color: var(--ig-success-700);
+  --border-radius: 50%;
+}
+
+.badge-styling {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 32px;
+  padding: 24px 16px;
+}
+
+.styling-item {
+  position: relative;
+  display: flex;
+}
diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html
index edceb81ace..fcc19b98d1 100644
--- a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html
+++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html
@@ -1,18 +1,18 @@
-<igx-list>
-  <igx-list-item [isHeader]="true">
-    Team Members (4)
-  </igx-list-item>
-  @for (member of members; track member) {
-    <igx-list-item>
-      <div class="wrapper">
-        <div>
-          <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge ![--background-color:#FF4E00] ![--border-radius:4px]"></igx-badge>
-        </div>
-        <div class="contact-container">
-          <span class="contact-name">{{ member.name }}</span>
-        </div>
-      </div>
-    </igx-list-item>
-  }
-</igx-list>
+<div class="flex flex-wrap items-center justify-center gap-8 p-6">
+  <div class="relative flex">
+    <igx-avatar initials="AZ" shape="rounded" size="small"></igx-avatar>
+    <igx-badge icon="close" outlined class="badge-style badge-close"></igx-badge>
+  </div>
+  <div class="relative flex">
+    <igx-avatar icon="person" shape="rounded" size="small"></igx-avatar>
+    <igx-badge icon="volume_off" outlined class="badge-style badge-volume"></igx-badge>
+  </div>
+  <div class="relative flex">
+    <igx-avatar initials="AZ" shape="circle" size="small"></igx-avatar>
+    <igx-badge icon="remove" outlined class="badge-style badge-remove"></igx-badge>
+  </div>
+  <div class="relative flex">
+    <igx-avatar icon="person" shape="square" size="small"></igx-avatar>
+    <igx-badge icon="check" outlined class="badge-style badge-check"></igx-badge>
+  </div>
+</div>
diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
index a60d456faa..af4d88a35d 100644
--- a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
+++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
@@ -1 +1,15 @@
 @use "layout.scss";
+
+igx-badge {
+  --ig-size: var(--ig-size-small);
+}
+
+igx-avatar {
+  --size: 40px;
+  --ig-avatar-background: var(--ig-gray-700);
+  --ig-avatar-color: var(--ig-gray-50);
+}
+
+:host ::ng-deep igx-avatar igx-icon {
+  color: var(--ig-gray-50);
+}
diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts
index 2ff74b33d7..18ca71a576 100644
--- a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts
+++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts
@@ -1,6 +1,4 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Member } from '../model/member.model';
-import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
@@ -10,13 +8,6 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
     styleUrls: ['./badge-tailwind-styling.component.scss'],
     templateUrl: './badge-tailwind-styling.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
+    imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeTailwindStylingComponent {
-  public members: Member[] = [
-    new Member('Terrance Orta', 'online'),
-    new Member('Donna Price', 'online'),
-    new Member('Lisa Landers', 'away'),
-    new Member('Dorothy H. Spencer', 'offline')
-  ];
-}
+export class BadgeTailwindStylingComponent { }
diff --git a/src/app/data-display/badge/badge-tailwind-styling/layout.scss b/src/app/data-display/badge/badge-tailwind-styling/layout.scss
index cee5eb7fb1..7aea4ef79b 100644
--- a/src/app/data-display/badge/badge-tailwind-styling/layout.scss
+++ b/src/app/data-display/badge/badge-tailwind-styling/layout.scss
@@ -1,18 +1,25 @@
-.wrapper {
-    display: flex;
-    flex-direction: row;
-  }
-  
-  .contact-name {
-    font-weight: 600;
-  }
-  
-  .contact-container{
-    margin-left: 20px;
-  }
-  
-  .badge-style {
-    position: absolute;
-    bottom: 2.5px;
-    left: 40px;
-  }
\ No newline at end of file
+.badge-close {
+  --background-color: var(--ig-error-500);
+  --border-radius: 50%;
+}
+
+.badge-volume {
+  --background-color: #7c3aed;
+  --border-radius: 50%;
+}
+
+.badge-remove {
+  --background-color: var(--ig-gray-900);
+  --border-radius: 50%;
+}
+
+.badge-check {
+  --background-color: var(--ig-success-600);
+  --border-radius: 50%;
+}
+
+.badge-style {
+  position: absolute;
+  inset-block-end: -4px;
+  inset-inline-end: -4px;
+}
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.html b/src/app/data-display/badge/badge-type/badge-type.component.html
index 0ce3a21fa9..e0a7779a7d 100644
--- a/src/app/data-display/badge/badge-type/badge-type.component.html
+++ b/src/app/data-display/badge/badge-type/badge-type.component.html
@@ -1,14 +1,23 @@
 <div class="badge-type">
     <div class="badge-type-item">
-        <span>Number</span>
-        <igx-badge value="12" type="primary"></igx-badge>
+        <div class="avatar-wrapper">
+            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-badge dot outlined type="success" class="dot-badge"></igx-badge>
+        </div>
+        <span>Dot</span>
     </div>
     <div class="badge-type-item">
+        <div class="avatar-wrapper">
+            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-badge icon="check" outlined type="success"></igx-badge>
+        </div>
         <span>Icon</span>
-        <igx-badge icon="check" type="primary"></igx-badge>
     </div>
     <div class="badge-type-item">
-        <span>Dot</span>
-        <igx-badge dot type="primary"></igx-badge>
+        <div class="avatar-wrapper">
+            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-badge value="2" outlined type="success"></igx-badge>
+        </div>
+        <span>Text</span>
     </div>
 </div>
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss
index 306a6e5a1e..b77fe7652b 100644
--- a/src/app/data-display/badge/badge-type/badge-type.component.scss
+++ b/src/app/data-display/badge/badge-type/badge-type.component.scss
@@ -1,7 +1,20 @@
+igx-avatar {
+    --size: 40px;
+}
+
+igx-badge {
+    --ig-size: var(--ig-size-small);
+    position: absolute;
+    inset-block-end: -6px;
+    inset-inline-end: -4px;
+}
+
 .badge-type {
     display: flex;
     align-items: center;
-    gap: 32px;
+    justify-content: center;
+    gap: 40px;
+    min-height: 7rem;
     padding: 16px;
 }
 
@@ -9,10 +22,24 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 12px;
+    justify-content: center;
+    gap: 16px;
+    min-width: 56px;
+    min-height: 72px;
+}
+
+.avatar-wrapper {
+    position: relative;
+    display: flex;
+}
+
+.dot-badge {
+    inset-block-end: 0;
+    inset-inline-end: 0;
 }
 
 .badge-type-item span {
     color: var(--ig-gray-700);
-    font-size: 14px;
+    font-size: 12px;
+    line-height: 16px;
 }
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.ts b/src/app/data-display/badge/badge-type/badge-type.component.ts
index 25555b5c5a..8eb07bafca 100644
--- a/src/app/data-display/badge/badge-type/badge-type.component.ts
+++ b/src/app/data-display/badge/badge-type/badge-type.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 @Component({
@@ -6,6 +7,6 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
     templateUrl: './badge-type.component.html',
     styleUrls: ['./badge-type.component.scss'],
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxBadgeComponent]
+    imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
 export class BadgeTypeComponent { }
diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.html b/src/app/data-display/badge/badge-variants/badge-variants.component.html
index 2e629a9a69..9944cd0f36 100644
--- a/src/app/data-display/badge/badge-variants/badge-variants.component.html
+++ b/src/app/data-display/badge/badge-variants/badge-variants.component.html
@@ -1,4 +1,37 @@
-<div class="wrapper">
-    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-    <igx-badge icon="check" type="success" shape="square"></igx-badge>
+<div class="badge-variants">
+    <div class="variant-item">
+        <div class="avatar-wrapper">
+            <igx-avatar icon="notifications" shape="circle" size="small"></igx-avatar>
+            <igx-badge value="2" outlined type="primary"></igx-badge>
+        </div>
+        <span>Primary</span>
+    </div>
+    <div class="variant-item">
+        <div class="avatar-wrapper">
+            <igx-avatar initials="AZ" shape="circle" size="small"></igx-avatar>
+            <igx-badge icon="check" outlined type="info"></igx-badge>
+        </div>
+        <span>Info</span>
+    </div>
+    <div class="variant-item">
+        <div class="avatar-wrapper">
+            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-badge icon="check" outlined type="success"></igx-badge>
+        </div>
+        <span>Success</span>
+    </div>
+    <div class="variant-item">
+        <div class="avatar-wrapper">
+            <igx-avatar icon="mail" shape="circle" size="small"></igx-avatar>
+            <igx-badge value="2" outlined type="warning"></igx-badge>
+        </div>
+        <span>Warn</span>
+    </div>
+    <div class="variant-item">
+        <div class="avatar-wrapper">
+            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-badge icon="close" outlined type="error"></igx-badge>
+        </div>
+        <span>Error</span>
+    </div>
 </div>
diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
index dbb6d9c2b7..13dad2c6ce 100644
--- a/src/app/data-display/badge/badge-variants/badge-variants.component.scss
+++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
@@ -1,10 +1,43 @@
-.wrapper {
-  position: relative;
-  margin: 15px 0 0 15px;
-}
-
 igx-badge {
+  --ig-size: var(--ig-size-small);
   position: absolute;
-  bottom: 0;
-  left: 28px;
+  inset-block-end: -4px;
+  inset-inline-end: -4px;
+}
+
+igx-avatar {
+  --ig-avatar-background: var(--ig-gray-700);
+  --ig-avatar-color: var(--ig-gray-50);
+}
+
+:host ::ng-deep .variant-item:first-child igx-avatar igx-icon,
+:host ::ng-deep .variant-item:nth-child(4) igx-avatar igx-icon {
+  color: var(--ig-gray-50);
+}
+
+.badge-variants {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 32px;
+  padding: 24px 16px;
+}
+
+.variant-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  min-width: 56px;
+}
+
+.variant-item span {
+  color: var(--ig-gray-700);
+  font-size: 13px;
+}
+
+.avatar-wrapper {
+  position: relative;
+  display: flex;
 }

From b3f719997b3e9963e43513c0e7bb75b235ad4526 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Wed, 5 Aug 2026 18:17:06 +0300
Subject: [PATCH 6/8] feat(badge): update badge samples

---
 .../badge/badge-dot/badge-dot.component.html  |   2 +-
 .../badge/badge-dot/badge-dot.component.scss  | 126 +++++++++---------
 .../badge-icon/badge-icon.component.scss      |  75 ++++++-----
 .../badge-outlined.component.scss             | 113 ++++++++--------
 .../badge-overview.component.html             |   2 +-
 .../badge-overview.component.scss             |  68 +++++-----
 .../badge-shape/badge-shape.component.scss    |  34 ++---
 .../badge-size/badge-size.component.scss      |   8 +-
 .../badge-styling.component.html              |   4 +-
 .../badge-styling.component.scss              |  44 +++---
 .../badge/badge-styling/layout.scss           |  33 +++--
 .../badge-tailwind-styling.component.html     |   2 +-
 .../badge-tailwind-styling.component.scss     |  14 +-
 .../badge/badge-tailwind-styling/layout.scss  |  26 ++--
 .../badge-type/badge-type.component.html      |   6 +-
 .../badge-type/badge-type.component.scss      |   9 +-
 .../badge-variants.component.html             |   4 +-
 .../badge-variants.component.scss             |  47 ++++---
 18 files changed, 328 insertions(+), 289 deletions(-)

diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.html b/src/app/data-display/badge/badge-dot/badge-dot.component.html
index ef4282e831..659f1a328e 100644
--- a/src/app/data-display/badge/badge-dot/badge-dot.component.html
+++ b/src/app/data-display/badge/badge-dot/badge-dot.component.html
@@ -20,7 +20,7 @@
         }
     </div>
     <div class="dot-example avatar-example">
-        <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+        <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
         <igx-badge dot outlined type="error"></igx-badge>
     </div>
     <div class="dot-example nav-card">
diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
index 93a46a95cd..3cbc2229b9 100644
--- a/src/app/data-display/badge/badge-dot/badge-dot.component.scss
+++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
@@ -1,127 +1,133 @@
+::ng-deep body.custom-body:has(app-badge-dot) {
+    background: transparent;
+}
+
 igx-badge {
-  --ig-size: var(--ig-size-small);
+    --ig-size: var(--ig-size-small);
 }
 
 igx-avatar {
-  --size: 36px;
+    --size: 40px;
 }
 
 .icon-example igx-badge,
 .avatar-example igx-badge,
 .nav-icon igx-badge {
-  position: absolute;
+    position: absolute;
+}
+
+.icon-example igx-badge {
+    inset-block-start: 0;
+    inset-inline-end: 2px;
 }
 
-.icon-example igx-badge,
 .avatar-example igx-badge {
-  inset-block-start: 0;
-  inset-inline-end: -2px;
+	inset-block-start: -0.25rem;
+	inset-inline-end: -2px;
 }
 
 .nav-icon igx-badge {
-  inset-block-start: -2px;
-  inset-inline-end: -6px;
+    inset-block-start: -2px;
+    inset-inline-end: -6px;
 }
 
 .badge-dot {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 40px;
-  padding: 24px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    min-height: 8.5rem;
 }
 
 .dot-example {
-  position: relative;
+    position: relative;
 }
 
 .icon-example,
 .avatar-example,
 .icon-circle {
-  display: flex;
-  align-items: center;
-  width: 36px;
-  height: 36px;
+    display: flex;
+    align-items: center;
+    width: 36px;
+    height: 36px;
 }
 
 .icon-circle {
-  justify-content: center;
-  border-radius: 50%;
-  background: var(--ig-gray-200);
-  color: var(--ig-gray-800);
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--ig-gray-200);
+    color: var(--ig-gray-800);
 }
 
 .notifications-card,
 .nav-card {
-  background: var(--ig-surface-500);
-  border-radius: 4px;
-  box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12);
+    background: var(--ig-surface-500);
+    border-radius: 4px;
+    box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12);
 }
 
 .notifications-card {
-  min-width: 272px;
-  padding: 8px 0;
+    min-width: 272px;
+    padding: 8px 0;
 }
 
 .notification-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: var(--ig-gray-900);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: var(--ig-gray-900);
 }
 
 .row-indicator {
-  display: inline-flex;
-  justify-content: center;
-  width: 12px;
+    display: inline-flex;
+    justify-content: center;
+    width: 12px;
 }
 
 .row-title {
-  flex: 1;
+    flex: 1;
 }
 
 .row-time {
-  font-size: 13px;
-  color: var(--ig-gray-900);
+    font-size: 13px;
+    color: var(--ig-gray-900);
 }
 
 .row-time.unread {
-  color: var(--ig-primary-500);
-  font-weight: 600;
+    color: #0057A9;
+    font-weight: 600;
 }
 
 .row-chevron {
-  --ig-size: 1;
-
-  color: var(--ig-gray-600);
-  font-size: 18px;
+    --ig-size: 1rem;
+    color: var(--ig-gray-600);
+    font-size: 18px;
 }
 
 .nav-card {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
 }
 
 .nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  min-width: 56px;
-  color: var(--ig-gray-700);
-  font-size: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    min-width: 56px;
+    color: var(--ig-gray-700);
+    font-size: 12px;
 }
 
 .nav-item.active {
-  color: var(--ig-primary-500);
+    color: #0057A9;
 }
 
 .nav-icon {
-  position: relative;
-  display: inline-flex;
+    position: relative;
+    display: inline-flex;
 }
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
index 10950860d0..699cb6d0b3 100644
--- a/src/app/data-display/badge/badge-icon/badge-icon.component.scss
+++ b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
@@ -1,59 +1,62 @@
+::ng-deep body.custom-body:has(app-badge-icon) {
+    background: transparent;
+}
+
 igx-avatar {
-  --size: 40px;
-  --ig-avatar-background: var(--ig-gray-700);
-  --ig-avatar-color: var(--ig-gray-50);
+    --size: 40px;
+    --ig-avatar-background: var(--ig-gray-700);
+    --ig-avatar-color: var(--ig-gray-50);
 }
 
 .icon-wrapper {
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
 }
 
 .icon-wrapper > igx-badge {
-  --ig-size: var(--ig-size-medium);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
+    --ig-size: var(--ig-size-medium);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
 }
 
 .avatar-wrapper igx-badge {
-  --ig-size: var(--ig-size-small);
-  position: absolute;
-  inset-block-start: -4px;
-  inset-inline-end: -6px;
+    --ig-size: var(--ig-size-small);
+    position: absolute;
+    inset-block-start: -4px;
+    inset-inline-end: -6px;
 }
 
 .badge-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  gap: 32px;
-  padding: 24px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    min-height: 8.5rem;
 }
 
 .badge-icon-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  min-width: 56px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    min-width: 56px;
 }
 
 .badge-icon-item span {
-  color: var(--ig-gray-700);
-  font-size: 12px;
-  transform: translateY(4px);
+    color: var(--ig-gray-700);
+    font-size: 12px;
+    transform: translateY(4px);
 }
 
 .avatar-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
 }
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
index 4c857826e0..b03268b0cb 100644
--- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
@@ -1,116 +1,119 @@
+::ng-deep body.custom-body:has(app-badge-outlined) {
+    background: transparent;
+}
+
 igx-badge {
   --ig-size: var(--ig-size-small);
 }
 
 igx-avatar {
-  --size: 40px;
-  --ig-avatar-background: var(--ig-gray-700);
-  --ig-avatar-color: var(--ig-gray-50);
+    --size: 40px;
+    --ig-avatar-background: var(--ig-gray-700);
+    --ig-avatar-color: var(--ig-gray-50);
 }
 
 :host ::ng-deep .outlined-example igx-avatar igx-icon {
-  color: var(--ig-gray-50);
+    color: var(--ig-gray-50);
 }
 
 .outlined-example:nth-child(2) igx-badge {
-  inset-block-start: auto;
-  inset-block-end: -6px;
-  inset-inline-end: -6px;
+    inset-block-start: auto;
+    inset-block-end: -6px;
+    inset-inline-end: -6px;
 }
 
 .step-marker igx-badge {
-  position: absolute;
-  inset-block-start: -3px;
-  inset-inline-end: -3px;
+    position: absolute;
+    inset-block-start: -1px;
+    inset-inline-end: -2px;
 }
 
 .outlined-example igx-badge {
-  position: absolute;
-  inset-block-start: -6px;
-  inset-inline-end: -10px;
+    position: absolute;
+    inset-block-start: -6px;
+    inset-inline-end: -10px;
 }
 
 .icon-circle igx-icon {
-  font-size: 20px;
+    font-size: 20px;
 }
 
 :host {
-  display: block;
-  padding-inline: 1rem;
+    display: block;
+    padding-inline: 1rem;
 }
 
 .badge-outlined {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 40px;
-  padding: 24px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 60px;
+    min-height: 7rem;
 }
 
 .outlined-example {
-  position: relative;
-  display: flex;
+    position: relative;
+    display: flex;
 }
 
 .icon-circle,
 .step-circle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
 }
 
 .icon-circle {
-  width: 36px;
-  height: 36px;
-  background: var(--ig-gray-200);
-  color: var(--ig-gray-800);
+    width: 36px;
+    height: 36px;
+    background: var(--ig-gray-200);
+    color: var(--ig-gray-800);
 }
 
 .steps {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
 }
 
 .step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
 }
 
 .step-marker {
-  position: relative;
-  display: flex;
+    position: relative;
+    display: flex;
 }
 
 .step-circle {
-  width: 26px;
-  height: 26px;
-  background: var(--ig-gray-900);
-  color: var(--ig-gray-50);
-  font-size: 12px;
+    width: 26px;
+    height: 26px;
+    background: var(--ig-gray-900);
+    color: var(--ig-gray-50);
+    font-size: 12px;
 }
 
 .step-circle.pending {
-  background: var(--ig-gray-200);
-  color: var(--ig-gray-800);
+    background: var(--ig-gray-200);
+    color: var(--ig-gray-800);
 }
 
 .step-connector {
-  width: 56px;
-  margin-block-start: 13px;
-  border-block-start: 1px solid var(--ig-gray-900);
+    width: 56px;
+    margin-block-start: 13px;
+    border-block-start: 1px solid var(--ig-gray-900);
 }
 
 .step-connector.pending {
-  border-block-start-style: dashed;
-  border-block-start-color: var(--ig-gray-400);
+    border-block-start-style: dashed;
+    border-block-start-color: var(--ig-gray-400);
 }
 
 .step-label {
-  color: var(--ig-gray-700);
-  font-size: 13px;
+    color: var(--ig-gray-700);
+    font-size: 13px;
 }
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.html b/src/app/data-display/badge/badge-overview/badge-overview.component.html
index 2505eae1d5..caa9148204 100644
--- a/src/app/data-display/badge/badge-overview/badge-overview.component.html
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.html
@@ -1,6 +1,6 @@
 <div class="badge-overview">
   <div class="badge-example avatar-example">
-    <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+    <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
     <igx-badge icon="check" outlined type="success"></igx-badge>
   </div>
   <div class="badge-example icon-example">
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss
index 1155a40e84..d85de03e6b 100644
--- a/src/app/data-display/badge/badge-overview/badge-overview.component.scss
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss
@@ -1,69 +1,71 @@
+::ng-deep body.custom-body:has(app-badge-overview) {
+    background: transparent;
+}
+
 igx-avatar {
-  --size: 40px;
+    --size: 40px;
 }
 
 igx-icon {
-  color: var(--ig-gray-700);
-  font-size: 1.5rem;
+    color: var(--ig-gray-700);
+    font-size: 1.5rem;
 }
 
 igx-badge {
-  --ig-size: var(--ig-size-small);
-
-  position: absolute;
-  inset-block-start: -0.15rem;
-  inset-inline-end: -0.15rem;
+    --ig-size: var(--ig-size-small);
+    position: absolute;
+    inset-block-start: -0.15rem;
+    inset-inline-end: -0.15rem;
 }
 
 .avatar-example igx-badge {
-  inset-block-start: auto;
-  inset-block-end: -0.15rem;
-  inset-inline-end: -0.15rem;
+    inset-block-start: auto;
+    inset-block-end: -0.15rem;
+    inset-inline-end: -0.15rem;
 }
 
 .event-example igx-chip {
-  --ig-size: var(--ig-size-large);
+    --ig-size: var(--ig-size-large);
 }
 
 .event-example igx-badge {
-  inset-block-start: 0;
-  inset-inline-end: -0.8rem;
+    inset-block-start: 0;
+    inset-inline-end: -0.8rem;
 }
 
 .icon-example igx-badge {
-  inset-block-start: 0;
-  inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
 }
 
 .notification-example igx-badge {
-  inset-block-start: 0.5rem;
-  inset-inline-end: 0.5rem;
+    inset-block-start: 0.5rem;
+    inset-inline-end: 0.5rem;
 }
 
 .event-example {
-  min-width: auto;
+    min-width: auto;
 }
 
 .badge-overview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
-  min-height: 7rem;
-  padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 60px;
+    min-height: 7rem;
 }
 
 .badge-example {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2.5rem;
-  min-height: 2.5rem;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
 }
 
 .icon-example,
 .notification-example {
-  width: 2.5rem;
-  height: 2.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
 }
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
index e2aae09a26..9cf975755f 100644
--- a/src/app/data-display/badge/badge-shape/badge-shape.component.scss
+++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
@@ -1,26 +1,30 @@
+::ng-deep body.custom-body:has(app-badge-shape) {
+    background: transparent;
+}
+
 .badge-shape {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  padding: 24px 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    min-height: 8.5rem;
 }
 
 .badge-shape-row {
-  display: grid;
-  grid-template-columns: 80px 40px 40px 40px;
-  align-items: center;
-  justify-items: center;
-  gap: 8px;
+    display: grid;
+    grid-template-columns: 80px 40px 40px 40px;
+    align-items: center;
+    justify-items: center;
+    gap: 8px;
 }
 
 .row-label {
-  justify-self: end;
-  color: var(--ig-gray-700);
-  font-size: 14px;
+    justify-self: end;
+    color: var(--ig-gray-700);
+    font-size: 14px;
 }
 
 .badge-small {
-  --ig-size: var(--ig-size-small);
+    --ig-size: var(--ig-size-small);
 }
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss
index 020f304da3..16b991941c 100644
--- a/src/app/data-display/badge/badge-size/badge-size.component.scss
+++ b/src/app/data-display/badge/badge-size/badge-size.component.scss
@@ -1,10 +1,14 @@
+::ng-deep body.custom-body:has(app-badge-size) {
+    background: transparent;
+}
+
 .badge-size {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 20px;
-    padding: 24px 16px;
+    gap: 40px;
+    padding: 32px;
 }
 
 .badge-size-row {
diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.html b/src/app/data-display/badge/badge-styling/badge-styling.component.html
index 11d9227e08..00bd36f856 100644
--- a/src/app/data-display/badge/badge-styling/badge-styling.component.html
+++ b/src/app/data-display/badge/badge-styling/badge-styling.component.html
@@ -4,7 +4,7 @@
     <igx-badge icon="photo_camera" outlined class="badge-teal"></igx-badge>
   </div>
   <div class="styling-item">
-    <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+    <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
     <igx-badge icon="star_border" outlined class="badge-amber"></igx-badge>
   </div>
   <div class="styling-item pink">
@@ -12,7 +12,7 @@
     <igx-badge value="2" outlined class="badge-magenta"></igx-badge>
   </div>
   <div class="styling-item">
-    <igx-avatar src="assets/images/avatar/10.jpg" shape="rounded" size="small"></igx-avatar>
+    <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar6.png" shape="rounded" size="small"></igx-avatar>
     <igx-badge dot outlined class="badge-lime"></igx-badge>
   </div>
 </div>
diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.scss b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
index 2d0f09b168..b289199b6d 100644
--- a/src/app/data-display/badge/badge-styling/badge-styling.component.scss
+++ b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
@@ -1,50 +1,54 @@
 @use "layout.scss";
 
+::ng-deep body.custom-body:has(app-badge-styling) {
+    background: transparent;
+}
+
 igx-badge {
-  --ig-size: var(--ig-size-small);
+    --ig-size: var(--ig-size-small);
 }
 
 :host ::ng-deep .badge-teal igx-icon,
 :host ::ng-deep .badge-amber igx-icon,
 :host ::ng-deep .styling-item.pink igx-avatar igx-icon {
-  color: var(--ig-gray-50);
+    color: var(--ig-gray-50);
 }
 
 :host ::ng-deep .badge-teal igx-icon {
-  position: relative;
+    position: relative;
 }
 
 :host ::ng-deep .badge-teal igx-icon::after {
-  content: "";
-  position: absolute;
-  inset: 50% auto auto 50%;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: var(--ig-success-700);
-  transform: translate(-50%, -50%);
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--ig-success-700);
+    transform: translate(-50%, -50%);
 }
 
 .styling-item.green igx-avatar {
-  --icon-color: var(--ig-success-700);
+    --icon-color: var(--ig-success-700);
 }
 
 .styling-item igx-avatar {
-  --size: 40px;
+    --size: 40px;
 }
 
 .styling-item.green igx-avatar {
-  --ig-avatar-background: var(--ig-success-200);
-  --ig-avatar-color: var(--ig-gray-50);
+    --ig-avatar-background: var(--ig-success-200);
+    --ig-avatar-color: var(--ig-gray-50);
 }
 
 .styling-item.pink igx-avatar {
-  --ig-avatar-background: var(--ig-secondary-200);
-  --ig-avatar-color: var(--ig-gray-50);
+    --ig-avatar-background: #DA64FF;
+    --ig-avatar-color: var(--ig-gray-50);
 }
 
 .styling-item igx-badge {
-  position: absolute;
-  inset-block-end: -4px;
-  inset-inline-end: -4px;
+    position: absolute;
+    inset-block-end: -4px;
+    inset-inline-end: -4px;
 }
diff --git a/src/app/data-display/badge/badge-styling/layout.scss b/src/app/data-display/badge/badge-styling/layout.scss
index bb3c01be4c..601f783236 100644
--- a/src/app/data-display/badge/badge-styling/layout.scss
+++ b/src/app/data-display/badge/badge-styling/layout.scss
@@ -1,34 +1,33 @@
 .badge-teal {
-  --background-color: var(--ig-success-700);
-  --border-radius: 50%;
+    --background-color: var(--ig-success-700);
+    --border-radius: 50%;
 }
 
 .badge-amber {
-  --background-color: var(--ig-warn-600);
-  --border-radius: 50%;
+    --background-color: #C97C00;
+    --border-radius: 50%;
 }
 
 .badge-magenta {
-  --background-color: var(--ig-secondary-A400);
-  --text-color: var(--ig-secondary-A400-contrast);
-  --border-radius: 50%;
+    --background-color: #9C27B0;
+    --ig-avatar-color: var(--ig-gray-50);
+    --border-radius: 50%;
 }
 
 .badge-lime {
-  --background-color: var(--ig-success-700);
-  --border-radius: 50%;
+    --background-color: var(--ig-success-700);
+    --border-radius: 50%;
 }
 
 .badge-styling {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 32px;
-  padding: 24px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 60px;
+    min-height: 7rem;
 }
 
 .styling-item {
-  position: relative;
-  display: flex;
+    position: relative;
+    display: flex;
 }
diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html
index fcc19b98d1..4d03b9457e 100644
--- a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html
+++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html
@@ -1,4 +1,4 @@
-<div class="flex flex-wrap items-center justify-center gap-8 p-6">
+<div class="badge-parent flex items-center justify-center gap-12">
   <div class="relative flex">
     <igx-avatar initials="AZ" shape="rounded" size="small"></igx-avatar>
     <igx-badge icon="close" outlined class="badge-style badge-close"></igx-badge>
diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
index af4d88a35d..b04db9cce5 100644
--- a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
+++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
@@ -1,15 +1,19 @@
 @use "layout.scss";
 
+::ng-deep body.custom-body:has(app-badge-tailwind-styling) {
+    background: transparent;
+}
+
 igx-badge {
-  --ig-size: var(--ig-size-small);
+    --ig-size: var(--ig-size-small);
 }
 
 igx-avatar {
-  --size: 40px;
-  --ig-avatar-background: var(--ig-gray-700);
-  --ig-avatar-color: var(--ig-gray-50);
+    --size: 40px;
+    --ig-avatar-background: var(--ig-gray-700);
+    --ig-avatar-color: var(--ig-gray-50);
 }
 
 :host ::ng-deep igx-avatar igx-icon {
-  color: var(--ig-gray-50);
+    color: var(--ig-gray-50);
 }
diff --git a/src/app/data-display/badge/badge-tailwind-styling/layout.scss b/src/app/data-display/badge/badge-tailwind-styling/layout.scss
index 7aea4ef79b..e97d2f5aa4 100644
--- a/src/app/data-display/badge/badge-tailwind-styling/layout.scss
+++ b/src/app/data-display/badge/badge-tailwind-styling/layout.scss
@@ -1,25 +1,29 @@
 .badge-close {
-  --background-color: var(--ig-error-500);
-  --border-radius: 50%;
+    --background-color: var(--ig-error-500);
+    --border-radius: 50%;
 }
 
 .badge-volume {
-  --background-color: #7c3aed;
-  --border-radius: 50%;
+    --background-color: #8B5BB1;
+    --border-radius: 50%;
 }
 
 .badge-remove {
-  --background-color: var(--ig-gray-900);
-  --border-radius: 50%;
+    --background-color: var(--ig-gray-900);
+    --border-radius: 50%;
 }
 
 .badge-check {
-  --background-color: var(--ig-success-600);
-  --border-radius: 50%;
+    --background-color: var(--ig-success-600);
+    --border-radius: 50%;
 }
 
 .badge-style {
-  position: absolute;
-  inset-block-end: -4px;
-  inset-inline-end: -4px;
+    position: absolute;
+    inset-block-end: -4px;
+    inset-inline-end: -4px;
+}
+
+.badge-parent {
+    min-height: 7rem;
 }
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.html b/src/app/data-display/badge/badge-type/badge-type.component.html
index e0a7779a7d..4a3b93a78c 100644
--- a/src/app/data-display/badge/badge-type/badge-type.component.html
+++ b/src/app/data-display/badge/badge-type/badge-type.component.html
@@ -1,21 +1,21 @@
 <div class="badge-type">
     <div class="badge-type-item">
         <div class="avatar-wrapper">
-            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
             <igx-badge dot outlined type="success" class="dot-badge"></igx-badge>
         </div>
         <span>Dot</span>
     </div>
     <div class="badge-type-item">
         <div class="avatar-wrapper">
-            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
             <igx-badge icon="check" outlined type="success"></igx-badge>
         </div>
         <span>Icon</span>
     </div>
     <div class="badge-type-item">
         <div class="avatar-wrapper">
-            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
             <igx-badge value="2" outlined type="success"></igx-badge>
         </div>
         <span>Text</span>
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss
index b77fe7652b..e8bdd7de69 100644
--- a/src/app/data-display/badge/badge-type/badge-type.component.scss
+++ b/src/app/data-display/badge/badge-type/badge-type.component.scss
@@ -1,3 +1,7 @@
+::ng-deep body.custom-body:has(app-badge-type) {
+    background: transparent;
+}
+
 igx-avatar {
     --size: 40px;
 }
@@ -13,9 +17,8 @@ igx-badge {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 40px;
-    min-height: 7rem;
-    padding: 16px;
+    gap: 60px;
+    min-height: 8.5rem;
 }
 
 .badge-type-item {
diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.html b/src/app/data-display/badge/badge-variants/badge-variants.component.html
index 9944cd0f36..6b03f179d4 100644
--- a/src/app/data-display/badge/badge-variants/badge-variants.component.html
+++ b/src/app/data-display/badge/badge-variants/badge-variants.component.html
@@ -15,7 +15,7 @@
     </div>
     <div class="variant-item">
         <div class="avatar-wrapper">
-            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
             <igx-badge icon="check" outlined type="success"></igx-badge>
         </div>
         <span>Success</span>
@@ -29,7 +29,7 @@
     </div>
     <div class="variant-item">
         <div class="avatar-wrapper">
-            <igx-avatar src="assets/images/avatar/18.jpg" shape="circle" size="small"></igx-avatar>
+            <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
             <igx-badge icon="close" outlined type="error"></igx-badge>
         </div>
         <span>Error</span>
diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
index 13dad2c6ce..21864356a5 100644
--- a/src/app/data-display/badge/badge-variants/badge-variants.component.scss
+++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
@@ -1,43 +1,46 @@
+::ng-deep body.custom-body:has(app-badge-variants) {
+    background: transparent;
+}
+
 igx-badge {
-  --ig-size: var(--ig-size-small);
-  position: absolute;
-  inset-block-end: -4px;
-  inset-inline-end: -4px;
+    --ig-size: var(--ig-size-small);
+    position: absolute;
+    inset-block-end: -4px;
+    inset-inline-end: -4px;
 }
 
 igx-avatar {
-  --ig-avatar-background: var(--ig-gray-700);
-  --ig-avatar-color: var(--ig-gray-50);
+    --ig-avatar-background: var(--ig-gray-700);
+    --ig-avatar-color: var(--ig-gray-50);
 }
 
 :host ::ng-deep .variant-item:first-child igx-avatar igx-icon,
 :host ::ng-deep .variant-item:nth-child(4) igx-avatar igx-icon {
-  color: var(--ig-gray-50);
+    color: var(--ig-gray-50);
 }
 
 .badge-variants {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 32px;
-  padding: 24px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    min-height: 8.5rem;
 }
 
 .variant-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  min-width: 56px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    min-width: 56px;
 }
 
 .variant-item span {
-  color: var(--ig-gray-700);
-  font-size: 13px;
+    color: var(--ig-gray-700);
+    font-size: 13px;
 }
 
 .avatar-wrapper {
-  position: relative;
-  display: flex;
+    position: relative;
+    display: flex;
 }

From fd5896a62af0f70f4f86092b3f86913321aa0f51 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Wed, 5 Aug 2026 20:27:13 +0300
Subject: [PATCH 7/8] feat(badge): update background css

---
 .../badge/badge-dot/badge-dot.component.scss      |  4 ----
 .../badge/badge-icon/badge-icon.component.scss    |  4 ----
 .../badge-outlined/badge-outlined.component.scss  |  4 ----
 .../badge-overview/badge-overview.component.scss  |  4 ----
 .../badge/badge-shape/badge-shape.component.scss  |  4 ----
 .../badge/badge-size/badge-size.component.scss    |  4 ----
 .../badge-styling/badge-styling.component.scss    |  4 ----
 .../badge-tailwind-styling.component.scss         |  4 ----
 .../badge/badge-type/badge-type.component.scss    |  4 ----
 .../badge-variants/badge-variants.component.scss  |  4 ----
 src/styles.scss                                   | 15 +++++++++++++++
 11 files changed, 15 insertions(+), 40 deletions(-)

diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
index 3cbc2229b9..8cfe07c79d 100644
--- a/src/app/data-display/badge/badge-dot/badge-dot.component.scss
+++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
@@ -1,7 +1,3 @@
-::ng-deep body.custom-body:has(app-badge-dot) {
-    background: transparent;
-}
-
 igx-badge {
     --ig-size: var(--ig-size-small);
 }
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
index 699cb6d0b3..fadf787c8d 100644
--- a/src/app/data-display/badge/badge-icon/badge-icon.component.scss
+++ b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
@@ -1,7 +1,3 @@
-::ng-deep body.custom-body:has(app-badge-icon) {
-    background: transparent;
-}
-
 igx-avatar {
     --size: 40px;
     --ig-avatar-background: var(--ig-gray-700);
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
index b03268b0cb..2ff5d88026 100644
--- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
@@ -1,7 +1,3 @@
-::ng-deep body.custom-body:has(app-badge-outlined) {
-    background: transparent;
-}
-
 igx-badge {
   --ig-size: var(--ig-size-small);
 }
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss
index d85de03e6b..3830a130dd 100644
--- a/src/app/data-display/badge/badge-overview/badge-overview.component.scss
+++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss
@@ -1,7 +1,3 @@
-::ng-deep body.custom-body:has(app-badge-overview) {
-    background: transparent;
-}
-
 igx-avatar {
     --size: 40px;
 }
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
index 9cf975755f..917648462a 100644
--- a/src/app/data-display/badge/badge-shape/badge-shape.component.scss
+++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
@@ -1,7 +1,3 @@
-::ng-deep body.custom-body:has(app-badge-shape) {
-    background: transparent;
-}
-
 .badge-shape {
     display: flex;
     flex-direction: column;
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss
index 16b991941c..59184f81f1 100644
--- a/src/app/data-display/badge/badge-size/badge-size.component.scss
+++ b/src/app/data-display/badge/badge-size/badge-size.component.scss
@@ -1,7 +1,3 @@
-::ng-deep body.custom-body:has(app-badge-size) {
-    background: transparent;
-}
-
 .badge-size {
     display: flex;
     flex-direction: column;
diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.scss b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
index b289199b6d..b42c628f49 100644
--- a/src/app/data-display/badge/badge-styling/badge-styling.component.scss
+++ b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
@@ -1,9 +1,5 @@
 @use "layout.scss";
 
-::ng-deep body.custom-body:has(app-badge-styling) {
-    background: transparent;
-}
-
 igx-badge {
     --ig-size: var(--ig-size-small);
 }
diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
index b04db9cce5..50ceb5330f 100644
--- a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
+++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss
@@ -1,9 +1,5 @@
 @use "layout.scss";
 
-::ng-deep body.custom-body:has(app-badge-tailwind-styling) {
-    background: transparent;
-}
-
 igx-badge {
     --ig-size: var(--ig-size-small);
 }
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss
index e8bdd7de69..0479de835a 100644
--- a/src/app/data-display/badge/badge-type/badge-type.component.scss
+++ b/src/app/data-display/badge/badge-type/badge-type.component.scss
@@ -1,7 +1,3 @@
-::ng-deep body.custom-body:has(app-badge-type) {
-    background: transparent;
-}
-
 igx-avatar {
     --size: 40px;
 }
diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
index 21864356a5..a53f2b4484 100644
--- a/src/app/data-display/badge/badge-variants/badge-variants.component.scss
+++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
@@ -1,7 +1,3 @@
-::ng-deep body.custom-body:has(app-badge-variants) {
-    background: transparent;
-}
-
 igx-badge {
     --ig-size: var(--ig-size-small);
     position: absolute;
diff --git a/src/styles.scss b/src/styles.scss
index 16c8722ea8..8c144ff6dd 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -19,6 +19,21 @@ body {
     margin: 0;
 }
 
+body.custom-body:has(
+    app-badge-overview,
+    app-badge-styling,
+    app-badge-dot,
+    app-badge-type,
+    app-badge-icon,
+    app-badge-size,
+    app-badge-shape,
+    app-badge-variants,
+    app-badge-outlined,
+    app-badge-tailwind-styling
+) {
+    background: transparent;
+}
+
 @include core();
 @include typography();
 @include theme(

From 0bbcdeee63be2f4a51d39f2b18dce0e45e7d5717 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Thu, 6 Aug 2026 00:12:25 +0300
Subject: [PATCH 8/8] fix(badge): update styling sample dot css

---
 .../badge/badge-styling/badge-styling.component.scss          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.scss b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
index b42c628f49..d280f593d6 100644
--- a/src/app/data-display/badge/badge-styling/badge-styling.component.scss
+++ b/src/app/data-display/badge/badge-styling/badge-styling.component.scss
@@ -45,6 +45,6 @@ igx-badge {
 
 .styling-item igx-badge {
     position: absolute;
-    inset-block-end: -4px;
-    inset-inline-end: -4px;
+    inset-block-end: -2px;
+    inset-inline-end: -2px;
 }