diff --git a/live-editing/configs/ChipConfigGenerator.ts b/live-editing/configs/ChipConfigGenerator.ts
index f20cc260a..459d52685 100644
--- a/live-editing/configs/ChipConfigGenerator.ts
+++ b/live-editing/configs/ChipConfigGenerator.ts
@@ -15,6 +15,12 @@ export class ChipConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/"
         }));
 
+        configs.push(new Config({
+            component: 'ChipVariantsComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/"
+        }));
+
         configs.push(new Config({
             component: 'ChipAreaSampleComponent',
             appConfig: BaseAppConfig,
diff --git a/src/app/data-display/chip/chip-variants/chip-variants.component.html b/src/app/data-display/chip/chip-variants/chip-variants.component.html
new file mode 100644
index 000000000..9a5cd68b6
--- /dev/null
+++ b/src/app/data-display/chip/chip-variants/chip-variants.component.html
@@ -0,0 +1,12 @@
+<div class="sample-container">
+  @for (item of variants; track item.label) {
+    <igx-chip
+      [id]="item.label"
+      [variant]="item.variant"
+      [selectable]="true"
+      [removable]="true"
+      (remove)="chipRemoved($event)">
+      {{ item.label }}
+    </igx-chip>
+  }
+</div>
diff --git a/src/app/data-display/chip/chip-variants/chip-variants.component.scss b/src/app/data-display/chip/chip-variants/chip-variants.component.scss
new file mode 100644
index 000000000..3a4043d65
--- /dev/null
+++ b/src/app/data-display/chip/chip-variants/chip-variants.component.scss
@@ -0,0 +1,8 @@
+igx-chip {
+    margin-right: 5px;
+}
+
+.sample-container {
+    padding-top: 15px;
+    padding-left: 10px;
+}
diff --git a/src/app/data-display/chip/chip-variants/chip-variants.component.ts b/src/app/data-display/chip/chip-variants/chip-variants.component.ts
new file mode 100644
index 000000000..b6f1a6be6
--- /dev/null
+++ b/src/app/data-display/chip/chip-variants/chip-variants.component.ts
@@ -0,0 +1,26 @@
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { IBaseChipEventArgs, IgxChipComponent, IgxChipTypeVariant } from 'igniteui-angular/chips';
+
+@Component({
+    selector: 'app-chip-variants',
+    styleUrls: ['./chip-variants.component.scss'],
+    templateUrl: './chip-variants.component.html',
+    imports: [IgxChipComponent]
+})
+export class ChipVariantsComponent {
+    private cdr = inject(ChangeDetectorRef);
+
+    public variants: { variant: IgxChipTypeVariant | undefined; label: string }[] = [
+        { variant: undefined, label: 'Default' },
+        { variant: IgxChipTypeVariant.PRIMARY, label: 'Primary' },
+        { variant: IgxChipTypeVariant.INFO, label: 'Info' },
+        { variant: IgxChipTypeVariant.SUCCESS, label: 'Success' },
+        { variant: IgxChipTypeVariant.WARNING, label: 'Warning' },
+        { variant: IgxChipTypeVariant.DANGER, label: 'Danger' }
+    ];
+
+    public chipRemoved(event: IBaseChipEventArgs) {
+        this.variants = this.variants.filter(v => v.label !== event.owner.id);
+        this.cdr.detectChanges();
+    }
+}
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index e4e73b360..fab3c5d4f 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -8,6 +8,7 @@ export const dataDisplayRoutesData = {
     "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" },
+    "chip-variants": { displayName: "Chip Variants", parentName: "Chip" },
     "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" },
     "chip-styling": { displayName: "Chip Styling", parentName: "Chip" },
     "chip-tailwind-styling": { displayName: "Chip Tailwind Styling", parentName: "Chip" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 49f75a4ad..2b0737aca 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -6,6 +6,7 @@ import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-
 import { BadgeTailwindStylingSampleComponent } from './badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.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';
 import { ChipStylingSampleComponent } from './chip/chip-styling/chip-styling.component';
 import { ChipTailwindStylingSampleComponent } from './chip/chip-tailwind-styling/chip-tailwind-styling.component';
 import { CircularDynamicSampleComponent } from './circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component';
@@ -87,6 +88,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['chip-simple'],
         path: 'chip-simple'
     },
+    {
+        component: ChipVariantsComponent,
+        data: dataDisplayRoutesData['chip-variants'],
+        path: 'chip-variants'
+    },
     {
         component: CircularDynamicSampleComponent,
         data: dataDisplayRoutesData['circular-dynamic-sample'],