diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts
index 6c823bf37..a43b3ec7c 100644
--- a/live-editing/configs/BadgeConfigGenerator.ts
+++ b/live-editing/configs/BadgeConfigGenerator.ts
@@ -40,6 +40,13 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
+        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"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
         return configs;
     }
 }
diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html b/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html
new file mode 100644
index 000000000..798c7e17a
--- /dev/null
+++ b/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html
@@ -0,0 +1,4 @@
+<div class="wrapper">
+    <igx-avatar icon="face" shape="rounded" size="small"></igx-avatar>
+    <igx-badge dot type="success"></igx-badge>
+</div>
diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss b/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss
new file mode 100644
index 000000000..e85529375
--- /dev/null
+++ b/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss
@@ -0,0 +1,17 @@
+.wrapper {
+    display: flex;
+    position: relative;
+    margin-top: 15px;
+
+    igx-avatar {
+        anchor-name: --avatar;
+    }
+
+    igx-badge {
+        position: absolute;
+        position-anchor: --avatar;
+        bottom: anchor(--avatar top);
+        left: anchor(right);
+        transform: translate(-75%, 75%);
+    }
+}
diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts b/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts
new file mode 100644
index 000000000..23cbbb538
--- /dev/null
+++ b/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+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',
+    imports: [IgxAvatarComponent, IgxBadgeComponent]
+})
+export class BadgeDotSampleComponent { }
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index b3c0b7f33..e4e73b360 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -4,6 +4,7 @@ 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-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" },
     "chip-simple": { displayName: "Chip Simple", parentName: "Chip" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index acb3a45ed..49f75a4ad 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -1,6 +1,7 @@
 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 { 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 { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component';
@@ -61,6 +62,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['badge-sample-3'],
         path: 'badge-sample-3'
     },
+    {
+        component: BadgeDotSampleComponent,
+        data: dataDisplayRoutesData['badge-dot-sample'],
+        path: 'badge-dot-sample'
+    },
     {
         component: BadgeStylingSampleComponent,
         data: dataDisplayRoutesData['badge-styling-sample'],