diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts
index a43b3ec7c..c331361e1 100644
--- a/live-editing/configs/BadgeConfigGenerator.ts
+++ b/live-editing/configs/BadgeConfigGenerator.ts
@@ -33,6 +33,7 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
+        // badge styling sample
         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"],
@@ -40,6 +41,7 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
+        // badge dot sample
         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"],
@@ -47,6 +49,14 @@ export class BadgeConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/badge/"
         }));
 
+        // badge outlined
+        configs.push(new Config({
+            component: 'BadgeOutlinedComponent',
+            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
         return configs;
     }
 }
diff --git a/package-lock.json b/package-lock.json
index 78d8725d4..59ed00654 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "file-saver": "^2.0.2",
         "fuse.js": "^7.1.0",
         "hammerjs": "^2.0.8",
-        "igniteui-angular": "^22.0.0-beta.4",
+        "igniteui-angular": "^22.0.0-rc.1",
         "igniteui-angular-charts": "^22.0.0-alpha.0",
         "igniteui-angular-core": "^22.0.0-alpha.0",
         "igniteui-angular-extras": "^22.0.0-beta.2",
@@ -10627,9 +10627,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/igniteui-angular": {
-      "version": "22.0.0-beta.4",
-      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-22.0.0-beta.4.tgz",
-      "integrity": "sha512-kMpCePvE2GI9yzZ8hpvEUfrM06szbPKS3dbsOJYJrcLvkEgqgIsM4xBEgVb0rvSNZZ4+x9VlN0VxZuVplXRdSw==",
+      "version": "22.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-22.0.0-rc.1.tgz",
+      "integrity": "sha512-j/umVjGDEn4c04rUw5JJisbo4gzOqOQDQj2q2lL6Ejy2TUe6iENugoE/1i8IubKkXBguOUMPl9QqhUUBR/u2vA==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@igniteui/material-icons-extended": "^3.1.0",
diff --git a/package.json b/package.json
index 5f06a3d7a..53abf961d 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "file-saver": "^2.0.2",
     "fuse.js": "^7.1.0",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^22.0.0-beta.4",
+    "igniteui-angular": "^22.0.0-rc.1",
     "igniteui-angular-charts": "^22.0.0-alpha.0",
     "igniteui-angular-core": "^22.0.0-alpha.0",
     "igniteui-angular-extras": "^22.0.0-beta.2",
@@ -113,8 +113,8 @@
       "@angular/compiler": "^22.0.0"
     },
     "igniteui-angular-extras": {
-      "igniteui-angular": "^22.0.0-beta.4",
-      "@infragistics/igniteui-angular": "^22.0.0-beta.4",
+      "igniteui-angular": "^22.0.0-rc.1",
+      "@infragistics/igniteui-angular": "^22.0.0-rc.1",
       "igniteui-angular-core": "^22.0.0-alpha.0",
       "igniteui-angular-charts": "^22.0.0-alpha.0",
       "@angular/core": "^22.0.0",
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
index e85529375..da1d082f5 100644
--- 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
@@ -1,17 +1,17 @@
 .wrapper {
-    display: flex;
-    position: relative;
-    margin-top: 15px;
+  display: flex;
+  position: relative;
+  margin: 15px 0 0 15px;
 
-    igx-avatar {
-        anchor-name: --avatar;
-    }
+  igx-avatar {
+    anchor-name: --avatar;
+  }
 
-    igx-badge {
-        position: absolute;
-        position-anchor: --avatar;
-        bottom: anchor(--avatar top);
-        left: anchor(right);
-        transform: translate(-75%, 75%);
-    }
+  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-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
index c088ccfad..dbb6d9c2b 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,6 +1,6 @@
 .wrapper {
-    position: relative;
-    margin-top: 15px;
+  position: relative;
+  margin: 15px 0 0 15px;
 }
 
 igx-badge {
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
new file mode 100644
index 000000000..3a7e6f397
--- /dev/null
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html
@@ -0,0 +1,7 @@
+<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>
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
new file mode 100644
index 000000000..21db08ffe
--- /dev/null
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
@@ -0,0 +1,33 @@
+:host {
+  display: block;
+  padding-inline: 1rem;
+}
+
+.wrapper {
+  position: relative;
+  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;
+}
+
+igx-avatar {
+    anchor-name: --avatar;
+}
+
+igx-badge {
+  --size: 1rem;
+
+  position: absolute;
+  inset-block-end: anchor(--avatar bottom);
+  inset-inline-end: anchor(--avatar right);
+}
+
+span {
+  display: block;
+  font-weight: 600;
+}
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
new file mode 100644
index 000000000..5f99c356b
--- /dev/null
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+
+@Component({
+  selector: 'app-badge-outlined',
+  styleUrls: ['./badge-outlined.component.scss'],
+  templateUrl: './badge-outlined.component.html',
+  imports: [IgxAvatarComponent, IgxBadgeComponent]
+})
+
+export class BadgeOutlinedComponent { }
diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss b/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss
index c088ccfad..dbb6d9c2b 100644
--- a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss
+++ b/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss
@@ -1,6 +1,6 @@
 .wrapper {
-    position: relative;
-    margin-top: 15px;
+  position: relative;
+  margin: 15px 0 0 15px;
 }
 
 igx-badge {
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index fab3c5d4f..84c0e4554 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-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" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 2b0737aca..4db820c45 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 { 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';
@@ -63,6 +64,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['badge-sample-3'],
         path: 'badge-sample-3'
     },
+    {
+        component: BadgeOutlinedComponent,
+        data: dataDisplayRoutesData['badge-outlined-sample'],
+        path: 'badge-outlined-sample'
+    },
     {
         component: BadgeDotSampleComponent,
         data: dataDisplayRoutesData['badge-dot-sample'],