From 163e16fee8b689e64aafabc4c064385487facc5d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Oct 2025 09:18:46 +0000
Subject: [PATCH 01/13] Initial plan


From 5c5216819b943411da9b694628fb262b99fab586 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Oct 2025 09:26:39 +0000
Subject: [PATCH 02/13] Add badge sizes, dot type, and improved outline
 implementation

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
---
 .../src/lib/badge/badge.component.ts          | 42 ++++++++++++++++++-
 .../components/badge/_badge-component.scss    |  4 ++
 .../styles/components/badge/_badge-theme.scss | 17 +++++++-
 src/app/badge/badge.sample.html               |  2 +
 src/app/badge/badge.sample.ts                 | 10 ++++-
 5 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts
index fe3990d8b12..4dfc3422562 100644
--- a/projects/igniteui-angular/src/lib/badge/badge.component.ts
+++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts
@@ -11,9 +11,20 @@ export const IgxBadgeType = {
     INFO: 'info',
     SUCCESS: 'success',
     WARNING: 'warning',
-    ERROR: 'error'
+    ERROR: 'error',
+    DOT: 'dot'
 } as const;
 export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
+
+/**
+ * Determines the igxBadge size
+ */
+export const IgxBadgeSize = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large'
+} as const;
+export type IgxBadgeSize = (typeof IgxBadgeSize)[keyof typeof IgxBadgeSize];
 /**
  * Badge provides visual notifications used to decorate avatars, menus, etc.
  *
@@ -62,7 +73,7 @@ export class IgxBadgeComponent {
     * Sets/gets the type of the badge.
     *
     * @remarks
-    * Allowed values are `primary`, `info`, `success`, `warning`, `error`.
+    * Allowed values are `primary`, `info`, `success`, `warning`, `error`, `dot`.
     * Providing an invalid value won't display a badge.
     *
     * @example
@@ -73,6 +84,21 @@ export class IgxBadgeComponent {
     @Input()
     public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;
 
+   /**
+    * Sets/gets the size of the badge.
+    *
+    * @remarks
+    * Allowed values are `small`, `medium`, `large`.
+    * Default value is `medium`.
+    *
+    * @example
+    * ```html
+    * <igx-badge size="large"></igx-badge>
+    * ```
+    */
+    @Input()
+    public size: string | IgxBadgeSize = IgxBadgeSize.MEDIUM;
+
    /**
     * Sets/gets the value to be displayed inside the badge.
     *
@@ -219,4 +245,16 @@ export class IgxBadgeComponent {
     public get errorClass() {
         return this.type === IgxBadgeType.ERROR;
     }
+
+    @HostBinding('class.igx-badge--dot')
+    public get dotClass() {
+        return this.type === IgxBadgeType.DOT;
+    }
+
+    @HostBinding('style.--component-size')
+    protected get componentSize() {
+        if (this.size) {
+            return `var(--ig-size-${this.size})`;
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss
index 909374bd288..a630908f0f7 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss
@@ -35,6 +35,10 @@
             @extend %igx-badge--error !optional;
         }
 
+        @include m(dot) {
+            @extend %igx-badge--dot !optional;
+        }
+
         @include m(outlined) {
             @extend %igx-badge--outlined !optional;
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index 02a91673ef0..fc02f8e88f7 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -10,7 +10,7 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
-        --size: #{rem(22px)};
+        --size: var(--component-size, #{rem(22px)});
         --_badge-size: var(--size);
 
         display: inline-flex;
@@ -45,7 +45,8 @@
     }
 
     %igx-badge--outlined {
-        box-shadow: inset 0 0 0 rem(if($variant != 'bootstrap', 2px, 1px)) var-get($theme, 'border-color');
+        outline: rem(if($variant != 'bootstrap', 2px, 1px)) solid var-get($theme, 'border-color');
+        outline-offset: rem(-2px);
     }
 
     %igx-badge--square {
@@ -73,6 +74,18 @@
         background: color($color: 'error');
     }
 
+    %igx-badge--dot {
+        --size: #{rem(8px)};
+        min-width: var(--size);
+        min-height: var(--size);
+        padding: 0;
+
+        .igx-badge__value,
+        igx-icon {
+            display: none;
+        }
+    }
+
     %igx-badge--hidden {
         visibility: hidden;
     }
diff --git a/src/app/badge/badge.sample.html b/src/app/badge/badge.sample.html
index 47e674f1fb3..b8b8dae5114 100644
--- a/src/app/badge/badge.sample.html
+++ b/src/app/badge/badge.sample.html
@@ -5,6 +5,7 @@ <h3 class="sample-title">Angular Badge</h3>
             [type]="properties.variant"
             value="8"
             [shape]="properties.shape"
+            [size]="properties.size"
             [outlined]="properties.outlined"
         ></igx-badge>
         <div class="avatar-sample">
@@ -12,6 +13,7 @@ <h3 class="sample-title">Angular Badge</h3>
             <igx-badge
                 [type]="properties.variant"
                 [shape]="properties.shape"
+                [size]="properties.size"
                 [outlined]="properties.outlined"
             >
                 <igx-icon>bluetooth</igx-icon>
diff --git a/src/app/badge/badge.sample.ts b/src/app/badge/badge.sample.ts
index f8bcb45c90a..fa445d5facc 100644
--- a/src/app/badge/badge.sample.ts
+++ b/src/app/badge/badge.sample.ts
@@ -47,10 +47,17 @@ export class BadgeSampleComponent {
         variant: {
             control: {
                 type: 'select',
-                options: ['default', 'info', 'success', 'warning', 'error'],
+                options: ['default', 'info', 'success', 'warning', 'error', 'dot'],
                 defaultValue: 'default'
             }
         },
+        size: {
+            control: {
+                type: 'button-group',
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium'
+            }
+        },
         outlined: {
             control: {
                 type: 'boolean',
@@ -84,6 +91,7 @@ export class BadgeSampleComponent {
             success: 'success',
             warning: 'warning',
             error: 'danger',
+            dot: 'primary',
         })
     );
 

From f3866017e67f56b260777673e2b0dbe52d174166 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Oct 2025 09:28:31 +0000
Subject: [PATCH 03/13] Add tests for badge size and dot type features

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
---
 .../src/lib/badge/badge.component.spec.ts     | 49 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts b/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts
index d6654f0974e..3b7e382bde6 100644
--- a/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts
@@ -1,7 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { IgxBadgeComponent, IgxBadgeType } from './badge.component';
+import { IgxBadgeComponent, IgxBadgeType, IgxBadgeSize } from './badge.component';
 
 describe('Badge', () => {
     beforeEach(waitForAsync(() => {
@@ -11,7 +11,9 @@ describe('Badge', () => {
                 InitBadgeWithDefaultsComponent,
                 InitBadgeWithIconComponent,
                 IgxBadgeComponent,
-                InitBadgeWithIconARIAComponent
+                InitBadgeWithIconARIAComponent,
+                InitBadgeWithSizeComponent,
+                InitBadgeWithDotTypeComponent
             ]
         }).compileComponents();
     }));
@@ -87,6 +89,33 @@ describe('Badge', () => {
         const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0];
         expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
     });
+
+    it('Initializes badge with size', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithSizeComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+        const domBadge = fixture.debugElement.query(By.css('igx-badge')).nativeElement;
+
+        expect(badge.size).toBe(IgxBadgeSize.LARGE);
+        expect(domBadge.style.getPropertyValue('--component-size')).toBe('var(--ig-size-large)');
+    });
+
+    it('Initializes badge with default size', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDefaultsComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+
+        expect(badge.size).toBe(IgxBadgeSize.MEDIUM);
+    });
+
+    it('Initializes badge with dot type', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDotTypeComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+
+        expect(badge.type).toBe(IgxBadgeType.DOT);
+        expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
+    });
 });
 
 @Component({
@@ -120,3 +149,19 @@ class InitBadgeWithIconComponent {
 class InitBadgeWithIconARIAComponent {
     @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
 }
+
+@Component({
+    template: `<igx-badge size="large" value="10"></igx-badge>`,
+    imports: [IgxBadgeComponent]
+})
+class InitBadgeWithSizeComponent {
+    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
+}
+
+@Component({
+    template: `<igx-badge type="dot"></igx-badge>`,
+    imports: [IgxBadgeComponent]
+})
+class InitBadgeWithDotTypeComponent {
+    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
+}

From 807c4ea8e098fbda1522a6f5ea35ad599d59c8d9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Oct 2025 09:30:37 +0000
Subject: [PATCH 04/13] Improve badge colors for WCAG AA compliance and update
 sizing

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
---
 .../styles/components/badge/_badge-theme.scss | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index fc02f8e88f7..69aec14cf76 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -10,7 +10,7 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
-        --size: var(--component-size, #{rem(22px)});
+        --size: var(--component-size, var(--ig-size-medium, #{rem(22px)}));
         --_badge-size: var(--size);
 
         display: inline-flex;
@@ -60,18 +60,38 @@
 
     %igx-badge--success {
         background: color($color: 'success');
+        color: white;
+
+        igx-icon {
+            color: white;
+        }
     }
 
     %igx-badge--info {
         background: color($color: 'info');
+        color: white;
+
+        igx-icon {
+            color: white;
+        }
     }
 
     %igx-badge--warn {
         background: color($color: 'warn');
+        color: white;
+
+        igx-icon {
+            color: white;
+        }
     }
 
     %igx-badge--error {
         background: color($color: 'error');
+        color: white;
+
+        igx-icon {
+            color: white;
+        }
     }
 
     %igx-badge--dot {

From 8bed749c42f81dd0966b73b75fb0ab7699947ca7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Oct 2025 09:34:59 +0000
Subject: [PATCH 05/13] Update badge README documentation with new features

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
---
 .../igniteui-angular/src/lib/badge/README.md  | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/badge/README.md b/projects/igniteui-angular/src/lib/badge/README.md
index cd6e11958ac..f36aab187ce 100644
--- a/projects/igniteui-angular/src/lib/badge/README.md
+++ b/projects/igniteui-angular/src/lib/badge/README.md
@@ -1,7 +1,7 @@
 # igx-badge
 
 The **igx-badge** component is an absolutely positioned element that can be used in tandem with other components such as avatars, navigation menus, or anywhere else in an app where some active indication is required.
-With the igx-badge you can display active count or an icon in several different predefined styles.  
+With the igx-badge you can display active count or an icon in several different predefined styles and sizes.  
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html)
 
 # Usage
@@ -13,10 +13,13 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | Name   |      Type      |  Description |
 |:----------|:-------------:|:------|
 | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
-| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. |
+| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, `error`, or `dot`. This will change the background color of the badge according to the values set in the default theme. The `dot` type creates a minimal badge without any content. |
+| `size` | string | Set the size of the badge to either `small`, `medium`, or `large`. Default is `medium`. |
 | `position` | string | Set the position of the badge relative to its parent container to either `top-right`, `top-left`, `bottom-right`, or `bottom-left`. |
 | `value` | string | Set the value to be displayed inside the badge. |
 | `icon` | string | Set an icon for the badge from the material icons set. Will not be displayed if `value` for the badge is already set. |
+| `outlined` | boolean | Set whether the badge should have an outline. Default is `false`. |
+| `shape` | string | Set the shape of the badge to either `rounded` or `square`. Default is `rounded`. |
 
 # Examples
 
@@ -26,3 +29,16 @@ Using `igx-badge` with the `igx-avatar` component to show active status.
     <igx-badge type="info" value="8"></igx-badge>
 </igx-avatar>
 ```
+
+Using `igx-badge` with different sizes.
+```html
+<igx-badge size="small" value="5"></igx-badge>
+<igx-badge size="medium" value="10"></igx-badge>
+<igx-badge size="large" value="99+"></igx-badge>
+```
+
+Using `igx-badge` as a dot indicator.
+```html
+<igx-badge type="dot"></igx-badge>
+<igx-badge type="dot" outlined></igx-badge>
+```

From ba8095d91de9e80e50e44836849002aad24b5a0b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Oct 2025 09:36:57 +0000
Subject: [PATCH 06/13] Enhance badge sample with comprehensive examples of new
 features

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
---
 src/app/badge/badge.sample.html | 110 ++++++++++++++++++++++++++------
 src/app/badge/badge.sample.scss |  42 +++++++++++-
 2 files changed, 131 insertions(+), 21 deletions(-)

diff --git a/src/app/badge/badge.sample.html b/src/app/badge/badge.sample.html
index b8b8dae5114..f5f1c518bfa 100644
--- a/src/app/badge/badge.sample.html
+++ b/src/app/badge/badge.sample.html
@@ -1,23 +1,97 @@
 <div class="wrapper">
     <div class="badges">
-        <h3 class="sample-title">Angular Badge</h3>
-        <igx-badge
-            [type]="properties.variant"
-            value="8"
-            [shape]="properties.shape"
-            [size]="properties.size"
-            [outlined]="properties.outlined"
-        ></igx-badge>
-        <div class="avatar-sample">
-            <igx-avatar icon="face" shape="rounded"></igx-avatar>
-            <igx-badge
-                [type]="properties.variant"
-                [shape]="properties.shape"
-                [size]="properties.size"
-                [outlined]="properties.outlined"
-            >
-                <igx-icon>bluetooth</igx-icon>
-            </igx-badge>
+        <h3 class="sample-title">Angular Badge - Interactive</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge
+                    [type]="properties.variant"
+                    value="8"
+                    [shape]="properties.shape"
+                    [size]="properties.size"
+                    [outlined]="properties.outlined"
+                ></igx-badge>
+                <span>With Value</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge
+                    [type]="properties.variant"
+                    [shape]="properties.shape"
+                    [size]="properties.size"
+                    [outlined]="properties.outlined"
+                >
+                    <igx-icon>bluetooth</igx-icon>
+                </igx-badge>
+                <span>With Icon</span>
+            </div>
+            <div class="badge-item avatar-sample">
+                <igx-avatar icon="face" shape="rounded"></igx-avatar>
+                <igx-badge
+                    [type]="properties.variant"
+                    [shape]="properties.shape"
+                    [size]="properties.size"
+                    [outlined]="properties.outlined"
+                >
+                    <igx-icon>bluetooth</igx-icon>
+                </igx-badge>
+                <span>On Avatar</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Size Variants</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="info" value="5" size="small"></igx-badge>
+                <span>Small</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="10" size="medium"></igx-badge>
+                <span>Medium</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="99+" size="large"></igx-badge>
+                <span>Large</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Dot Type</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="dot"></igx-badge>
+                <span>Default Dot</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="dot" outlined></igx-badge>
+                <span>Outlined Dot</span>
+            </div>
+            <div class="badge-item avatar-sample">
+                <igx-avatar icon="face" shape="rounded"></igx-avatar>
+                <igx-badge type="dot"></igx-badge>
+                <span>Dot on Avatar</span>
+            </div>
+        </div>
+
+        <h3 class="sample-title">Type Variants</h3>
+        <div class="badge-examples">
+            <div class="badge-item">
+                <igx-badge type="primary" value="1"></igx-badge>
+                <span>Primary</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="info" value="2"></igx-badge>
+                <span>Info</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="success" value="3"></igx-badge>
+                <span>Success</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="warning" value="4"></igx-badge>
+                <span>Warning</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge type="error" value="5"></igx-badge>
+                <span>Error</span>
+            </div>
         </div>
     </div>
 
diff --git a/src/app/badge/badge.sample.scss b/src/app/badge/badge.sample.scss
index 85f3261b048..692a4eca183 100644
--- a/src/app/badge/badge.sample.scss
+++ b/src/app/badge/badge.sample.scss
@@ -1,16 +1,52 @@
 .wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    gap: 48px;
+    padding: 24px;
 }
 
 .badges {
-    place-items: center;
-    display: grid;
-    grid-template-columns: subgrid;
+    place-items: start;
+    display: flex;
+    flex-direction: column;
     gap: 24px;
 }
 
+.sample-title {
+    margin: 16px 0 8px 0;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.badge-examples {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 32px;
+    align-items: center;
+}
+
+.badge-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+
+    span {
+        font-size: 12px;
+        color: #666;
+        margin-top: 4px;
+    }
+}
+
 .avatar-sample {
     display: flex;
     align-items: center;
+    position: relative;
+
+    igx-badge {
+        position: absolute;
+        top: -4px;
+        right: -4px;
+    }
 }

From 4b53f14292bb743f65106cd2f76cc1988d661516 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Oct 2025 11:08:22 +0000
Subject: [PATCH 07/13] Refactor badge: Remove size input, change dot from type
 to boolean property

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
---
 .../igniteui-angular/src/lib/badge/README.md  | 20 ++++---
 .../src/lib/badge/badge.component.spec.ts     | 42 +++++---------
 .../src/lib/badge/badge.component.ts          | 56 ++++++-------------
 .../styles/components/badge/_badge-theme.scss |  2 +-
 src/app/badge/badge.sample.html               | 36 ++++++------
 src/app/badge/badge.sample.ts                 | 14 ++---
 6 files changed, 65 insertions(+), 105 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/badge/README.md b/projects/igniteui-angular/src/lib/badge/README.md
index f36aab187ce..a342c2e09c6 100644
--- a/projects/igniteui-angular/src/lib/badge/README.md
+++ b/projects/igniteui-angular/src/lib/badge/README.md
@@ -13,8 +13,8 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | Name   |      Type      |  Description |
 |:----------|:-------------:|:------|
 | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
-| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, `error`, or `dot`. This will change the background color of the badge according to the values set in the default theme. The `dot` type creates a minimal badge without any content. |
-| `size` | string | Set the size of the badge to either `small`, `medium`, or `large`. Default is `medium`. |
+| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. |
+| `dot` | boolean | Set whether the badge is displayed as a minimal dot indicator without any content. Default is `false`. |
 | `position` | string | Set the position of the badge relative to its parent container to either `top-right`, `top-left`, `bottom-right`, or `bottom-left`. |
 | `value` | string | Set the value to be displayed inside the badge. |
 | `icon` | string | Set an icon for the badge from the material icons set. Will not be displayed if `value` for the badge is already set. |
@@ -30,15 +30,17 @@ Using `igx-badge` with the `igx-avatar` component to show active status.
 </igx-avatar>
 ```
 
-Using `igx-badge` with different sizes.
+Using `igx-badge` as a dot indicator for notifications.
 ```html
-<igx-badge size="small" value="5"></igx-badge>
-<igx-badge size="medium" value="10"></igx-badge>
-<igx-badge size="large" value="99+"></igx-badge>
+<igx-badge dot type="success"></igx-badge>
+<igx-badge dot outlined type="error"></igx-badge>
 ```
 
-Using `igx-badge` as a dot indicator.
+Using different badge types.
 ```html
-<igx-badge type="dot"></igx-badge>
-<igx-badge type="dot" outlined></igx-badge>
+<igx-badge type="primary" value="1"></igx-badge>
+<igx-badge type="info" value="2"></igx-badge>
+<igx-badge type="success" value="3"></igx-badge>
+<igx-badge type="warning" value="4"></igx-badge>
+<igx-badge type="error" value="5"></igx-badge>
 ```
diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts b/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts
index 3b7e382bde6..6d398d5e871 100644
--- a/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts
@@ -1,7 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { IgxBadgeComponent, IgxBadgeType, IgxBadgeSize } from './badge.component';
+import { IgxBadgeComponent, IgxBadgeType } from './badge.component';
 
 describe('Badge', () => {
     beforeEach(waitForAsync(() => {
@@ -12,8 +12,7 @@ describe('Badge', () => {
                 InitBadgeWithIconComponent,
                 IgxBadgeComponent,
                 InitBadgeWithIconARIAComponent,
-                InitBadgeWithSizeComponent,
-                InitBadgeWithDotTypeComponent
+                InitBadgeWithDotComponent
             ]
         }).compileComponents();
     }));
@@ -90,31 +89,24 @@ describe('Badge', () => {
         expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
     });
 
-    it('Initializes badge with size', () => {
-        const fixture = TestBed.createComponent(InitBadgeWithSizeComponent);
-        fixture.detectChanges();
-        const badge = fixture.componentInstance.badge;
-        const domBadge = fixture.debugElement.query(By.css('igx-badge')).nativeElement;
-
-        expect(badge.size).toBe(IgxBadgeSize.LARGE);
-        expect(domBadge.style.getPropertyValue('--component-size')).toBe('var(--ig-size-large)');
-    });
-
-    it('Initializes badge with default size', () => {
-        const fixture = TestBed.createComponent(InitBadgeWithDefaultsComponent);
+    it('Initializes badge with dot property', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDotComponent);
         fixture.detectChanges();
         const badge = fixture.componentInstance.badge;
 
-        expect(badge.size).toBe(IgxBadgeSize.MEDIUM);
+        expect(badge.dot).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
     });
 
-    it('Initializes badge with dot type', () => {
-        const fixture = TestBed.createComponent(InitBadgeWithDotTypeComponent);
+    it('Initializes success badge as dot', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDotComponent);
         fixture.detectChanges();
         const badge = fixture.componentInstance.badge;
 
-        expect(badge.type).toBe(IgxBadgeType.DOT);
+        expect(badge.type).toBe(IgxBadgeType.SUCCESS);
+        expect(badge.dot).toBeTruthy();
         expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--success'))).toBeTruthy();
     });
 });
 
@@ -151,17 +143,9 @@ class InitBadgeWithIconARIAComponent {
 }
 
 @Component({
-    template: `<igx-badge size="large" value="10"></igx-badge>`,
-    imports: [IgxBadgeComponent]
-})
-class InitBadgeWithSizeComponent {
-    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
-}
-
-@Component({
-    template: `<igx-badge type="dot"></igx-badge>`,
+    template: `<igx-badge dot type="success"></igx-badge>`,
     imports: [IgxBadgeComponent]
 })
-class InitBadgeWithDotTypeComponent {
+class InitBadgeWithDotComponent {
     @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
 }
diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts
index 4dfc3422562..7d2671b99e4 100644
--- a/projects/igniteui-angular/src/lib/badge/badge.component.ts
+++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts
@@ -11,20 +11,9 @@ export const IgxBadgeType = {
     INFO: 'info',
     SUCCESS: 'success',
     WARNING: 'warning',
-    ERROR: 'error',
-    DOT: 'dot'
+    ERROR: 'error'
 } as const;
 export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
-
-/**
- * Determines the igxBadge size
- */
-export const IgxBadgeSize = {
-    SMALL: 'small',
-    MEDIUM: 'medium',
-    LARGE: 'large'
-} as const;
-export type IgxBadgeSize = (typeof IgxBadgeSize)[keyof typeof IgxBadgeSize];
 /**
  * Badge provides visual notifications used to decorate avatars, menus, etc.
  *
@@ -73,7 +62,7 @@ export class IgxBadgeComponent {
     * Sets/gets the type of the badge.
     *
     * @remarks
-    * Allowed values are `primary`, `info`, `success`, `warning`, `error`, `dot`.
+    * Allowed values are `primary`, `info`, `success`, `warning`, `error`.
     * Providing an invalid value won't display a badge.
     *
     * @example
@@ -84,21 +73,6 @@ export class IgxBadgeComponent {
     @Input()
     public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;
 
-   /**
-    * Sets/gets the size of the badge.
-    *
-    * @remarks
-    * Allowed values are `small`, `medium`, `large`.
-    * Default value is `medium`.
-    *
-    * @example
-    * ```html
-    * <igx-badge size="large"></igx-badge>
-    * ```
-    */
-    @Input()
-    public size: string | IgxBadgeSize = IgxBadgeSize.MEDIUM;
-
    /**
     * Sets/gets the value to be displayed inside the badge.
     *
@@ -209,6 +183,20 @@ export class IgxBadgeComponent {
     @HostBinding('class.igx-badge--outlined')
     public outlined = false;
 
+    /**
+     * Sets/gets whether the badge is displayed as a dot.
+     * When true, the badge will be rendered as a minimal 8px indicator without any content.
+     * Default value is `false`.
+     *
+     * @example
+     * ```html
+     * <igx-badge dot type="success"></igx-badge>
+     * ```
+     */
+    @Input({transform: booleanAttribute})
+    @HostBinding('class.igx-badge--dot')
+    public dot = false;
+
     /**
      * Defines a human-readable, accessor, author-localized description for
      * the `type` and the `icon` or `value` of the element.
@@ -245,16 +233,4 @@ export class IgxBadgeComponent {
     public get errorClass() {
         return this.type === IgxBadgeType.ERROR;
     }
-
-    @HostBinding('class.igx-badge--dot')
-    public get dotClass() {
-        return this.type === IgxBadgeType.DOT;
-    }
-
-    @HostBinding('style.--component-size')
-    protected get componentSize() {
-        if (this.size) {
-            return `var(--ig-size-${this.size})`;
-        }
-    }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index 69aec14cf76..94044f175bd 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -10,7 +10,7 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
-        --size: var(--component-size, var(--ig-size-medium, #{rem(22px)}));
+        --size: var(--ig-size, #{rem(22px)});
         --_badge-size: var(--size);
 
         display: inline-flex;
diff --git a/src/app/badge/badge.sample.html b/src/app/badge/badge.sample.html
index f5f1c518bfa..ed76062ab36 100644
--- a/src/app/badge/badge.sample.html
+++ b/src/app/badge/badge.sample.html
@@ -7,8 +7,8 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
                     [type]="properties.variant"
                     value="8"
                     [shape]="properties.shape"
-                    [size]="properties.size"
                     [outlined]="properties.outlined"
+                    [dot]="properties.dot"
                 ></igx-badge>
                 <span>With Value</span>
             </div>
@@ -16,8 +16,8 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
                 <igx-badge
                     [type]="properties.variant"
                     [shape]="properties.shape"
-                    [size]="properties.size"
                     [outlined]="properties.outlined"
+                    [dot]="properties.dot"
                 >
                     <igx-icon>bluetooth</igx-icon>
                 </igx-badge>
@@ -28,8 +28,8 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
                 <igx-badge
                     [type]="properties.variant"
                     [shape]="properties.shape"
-                    [size]="properties.size"
                     [outlined]="properties.outlined"
+                    [dot]="properties.dot"
                 >
                     <igx-icon>bluetooth</igx-icon>
                 </igx-badge>
@@ -37,35 +37,35 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
             </div>
         </div>
 
-        <h3 class="sample-title">Size Variants</h3>
+        <h3 class="sample-title">Dot Badges</h3>
         <div class="badge-examples">
             <div class="badge-item">
-                <igx-badge type="info" value="5" size="small"></igx-badge>
-                <span>Small</span>
+                <igx-badge dot type="primary"></igx-badge>
+                <span>Primary Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="info" value="10" size="medium"></igx-badge>
-                <span>Medium</span>
+                <igx-badge dot type="info"></igx-badge>
+                <span>Info Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="info" value="99+" size="large"></igx-badge>
-                <span>Large</span>
+                <igx-badge dot type="success"></igx-badge>
+                <span>Success Dot</span>
+            </div>
+            <div class="badge-item">
+                <igx-badge dot type="warning"></igx-badge>
+                <span>Warning Dot</span>
             </div>
-        </div>
-
-        <h3 class="sample-title">Dot Type</h3>
-        <div class="badge-examples">
             <div class="badge-item">
-                <igx-badge type="dot"></igx-badge>
-                <span>Default Dot</span>
+                <igx-badge dot type="error"></igx-badge>
+                <span>Error Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="dot" outlined></igx-badge>
+                <igx-badge dot outlined type="success"></igx-badge>
                 <span>Outlined Dot</span>
             </div>
             <div class="badge-item avatar-sample">
                 <igx-avatar icon="face" shape="rounded"></igx-avatar>
-                <igx-badge type="dot"></igx-badge>
+                <igx-badge dot type="success"></igx-badge>
                 <span>Dot on Avatar</span>
             </div>
         </div>
diff --git a/src/app/badge/badge.sample.ts b/src/app/badge/badge.sample.ts
index fa445d5facc..b2f466206af 100644
--- a/src/app/badge/badge.sample.ts
+++ b/src/app/badge/badge.sample.ts
@@ -47,18 +47,17 @@ export class BadgeSampleComponent {
         variant: {
             control: {
                 type: 'select',
-                options: ['default', 'info', 'success', 'warning', 'error', 'dot'],
+                options: ['default', 'info', 'success', 'warning', 'error'],
                 defaultValue: 'default'
             }
         },
-        size: {
+        outlined: {
             control: {
-                type: 'button-group',
-                options: ['small', 'medium', 'large'],
-                defaultValue: 'medium'
+                type: 'boolean',
+                defaultValue: false
             }
         },
-        outlined: {
+        dot: {
             control: {
                 type: 'boolean',
                 defaultValue: false
@@ -90,8 +89,7 @@ export class BadgeSampleComponent {
             info: 'info',
             success: 'success',
             warning: 'warning',
-            error: 'danger',
-            dot: 'primary',
+            error: 'danger'
         })
     );
 

From df432ed2ad6c5f890ab45959337fb167d2de38db Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Wed, 22 Oct 2025 12:07:47 +0300
Subject: [PATCH 08/13] refactor(badge): design enhancement

---
 .../src/lib/badge/badge.component.ts          |  4 +-
 .../styles/components/badge/_badge-theme.scss | 78 +++++++++----------
 .../core/styles/typography/_bootstrap.scss    |  2 +-
 .../lib/core/styles/typography/_fluent.scss   |  2 +-
 .../lib/core/styles/typography/_indigo.scss   |  4 +-
 .../lib/core/styles/typography/_material.scss |  2 +-
 src/app/badge/badge.sample.html               | 37 ++++-----
 src/app/badge/badge.sample.scss               |  8 +-
 src/app/badge/badge.sample.ts                 | 16 ++--
 9 files changed, 74 insertions(+), 79 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts
index 7d2671b99e4..c0cfc3a43ad 100644
--- a/projects/igniteui-angular/src/lib/badge/badge.component.ts
+++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts
@@ -153,7 +153,9 @@ export class IgxBadgeComponent {
     /** @hidden @internal */
     @HostBinding('class.igx-badge--square')
     public get _squareShape(): boolean {
-        return this.shape === 'square';
+        if (!this.dot) {
+            return this.shape === 'square';
+        }
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index 94044f175bd..4faf503a8b4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -10,8 +10,11 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
-        --size: var(--ig-size, #{rem(22px)});
-        --_badge-size: var(--size);
+        @include sizable();
+
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+        --badge-size: var(--component-size);
+        --_badge-size: #{var-get($theme, 'size')};
 
         display: inline-flex;
         justify-content: center;
@@ -25,18 +28,18 @@
         overflow: hidden;
 
         igx-icon {
-            --size: var(--igx-icon-size, calc(var(--_badge-size) / 2));
+            --size: var(--igx-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
+            --component-size: var(--badge-size);
 
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            font-weight: 400;
             color: var-get($theme, 'icon-color');
         }
 
         @if $variant == 'indigo' {
             igx-icon {
-                $icon-size: rem(12px);
+                $icon-size: sizable(rem(8px), rem(10px), rem(12px));
 
                 --ig-icon-size: #{$icon-size};
                 --igx-icon-size: #{$icon-size};
@@ -45,8 +48,7 @@
     }
 
     %igx-badge--outlined {
-        outline: rem(if($variant != 'bootstrap', 2px, 1px)) solid var-get($theme, 'border-color');
-        outline-offset: rem(-2px);
+        box-shadow: 0 0 0 rem(2px) var-get($theme, 'border-color');
     }
 
     %igx-badge--square {
@@ -55,53 +57,36 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding-inline: pad-inline(rem(4px));
+        padding-inline: pad-inline(rem(4px), rem(6px), if($variant == 'indigo', rem(6px), rem(8px)));
     }
 
     %igx-badge--success {
-        background: color($color: 'success');
-        color: white;
-
-        igx-icon {
-            color: white;
-        }
+        background: color($color: 'success', $variant: if($variant != 'material', if($variant == 'indigo', 700, 500), 900));
     }
 
     %igx-badge--info {
-        background: color($color: 'info');
-        color: white;
-
-        igx-icon {
-            color: white;
-        }
+        background: color($color: 'info', $variant: if($variant != 'material', if($variant == 'fluent', 700, 500), 800));
     }
 
     %igx-badge--warn {
         background: color($color: 'warn');
-        color: white;
-
-        igx-icon {
-            color: white;
-        }
+        color: contrast-color($color: 'warn', $variant: 500);
     }
 
     %igx-badge--error {
-        background: color($color: 'error');
-        color: white;
-
-        igx-icon {
-            color: white;
-        }
+        background: color($color: 'error', $variant: if($variant == 'material', 700, 500));
+        color: contrast-color($color: 'error', $variant: if($variant == 'bootstrap', 100, 900));
     }
 
     %igx-badge--dot {
-        --size: #{rem(8px)};
-        min-width: var(--size);
-        min-height: var(--size);
+        --_dot-size: #{var-get($theme, 'dot-size')};
+
+        min-width: var(--_dot-size);
+        min-height: var(--_dot-size);
         padding: 0;
 
-        .igx-badge__value,
-        igx-icon {
+        igx-icon,
+        > * {
             display: none;
         }
     }
@@ -112,15 +97,28 @@
 }
 
 /// Adds typography styles for the igx-badge component.
-/// Uses the 'caption' category from the typographic scale.
+/// Uses 'caption' and 'body-2' categories from the typographic scale.
 /// @group typography
 /// @param {Map} $categories [(text: 'caption')] - The categories from the typographic scale used for type styles.
-@mixin badge-typography($categories: (text: 'caption')) {
+@mixin badge-typography($categories: (text: null), $theme: null) {
     $text: map.get($categories, 'text');
 
     %igx-badge-display {
-        @include type-style($text) {
-            margin: 0;
+        @if $text {
+            @include type-style($text);
+        } @else {
+            @if $theme == 'indigo' {
+                @include type-style('button', false) {
+                    font-size: sizable(rem(9px), rem(10px), var(--ig-button-font-size));
+                    line-height: sizable(rem(12px), rem(14px), var(--ig-button-line-height));
+                }
+            } @else {
+                font-size: sizable(var(--ig-caption-font-size), var(--ig-body-2-font-size), var(--ig-body-2-font-size));
+                font-weight: sizable(var(--ig-caption-font-weight), var(--ig-body-2-font-weight), var(--ig-body-2-font-weight));
+                line-height: sizable(var(--ig-caption-line-height), var(--ig-body-2-line-height), var(--ig-body-2-line-height));
+                letter-spacing: sizable(var(--ig-caption-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing));
+                text-transform: sizable(var(--ig-caption-text-transform), var(--ig-body-2-text-transform), var(--ig-body-2-text-transform));
+            }
         }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
index 2bb1b767151..72cd0a11978 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
@@ -36,7 +36,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
-    @include badge-typography();
+    @include badge-typography($theme: 'bootstrap');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
index 2b8a6323070..3f9ab803925 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
@@ -35,7 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
-    @include badge-typography();
+    @include badge-typography($theme: 'fluent');
     @include banner-typography($categories: (
         message: 'caption'
     ));
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
index 737346995c4..5f1228dfb6e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
@@ -35,9 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
-    @include badge-typography($categories: (
-        text: 'button',
-    ));
+    @include badge-typography($theme: 'indigo');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss
index bc15191255c..8a6dd101db6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss
@@ -35,7 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
-    @include badge-typography();
+    @include badge-typography($theme: 'material');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();
diff --git a/src/app/badge/badge.sample.html b/src/app/badge/badge.sample.html
index ed76062ab36..5240855c490 100644
--- a/src/app/badge/badge.sample.html
+++ b/src/app/badge/badge.sample.html
@@ -1,14 +1,13 @@
 <div class="wrapper">
     <div class="badges">
-        <h3 class="sample-title">Angular Badge - Interactive</h3>
-        <div class="badge-examples">
+        <h3 class="sample-title">Angular Badge</h3>
+        <div class="badge-examples" [igSize]="properties.size">
             <div class="badge-item">
                 <igx-badge
                     [type]="properties.variant"
                     value="8"
                     [shape]="properties.shape"
                     [outlined]="properties.outlined"
-                    [dot]="properties.dot"
                 ></igx-badge>
                 <span>With Value</span>
             </div>
@@ -17,7 +16,6 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
                     [type]="properties.variant"
                     [shape]="properties.shape"
                     [outlined]="properties.outlined"
-                    [dot]="properties.dot"
                 >
                     <igx-icon>bluetooth</igx-icon>
                 </igx-badge>
@@ -29,7 +27,6 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
                     [type]="properties.variant"
                     [shape]="properties.shape"
                     [outlined]="properties.outlined"
-                    [dot]="properties.dot"
                 >
                     <igx-icon>bluetooth</igx-icon>
                 </igx-badge>
@@ -37,35 +34,31 @@ <h3 class="sample-title">Angular Badge - Interactive</h3>
             </div>
         </div>
 
-        <h3 class="sample-title">Dot Badges</h3>
-        <div class="badge-examples">
+        <h3 class="sample-title">Dot Type Badges</h3>
+        <div class="badge-examples" [igSize]="properties.size">
             <div class="badge-item">
-                <igx-badge dot type="primary"></igx-badge>
+                <igx-badge dot type="primary" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Primary Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge dot type="info"></igx-badge>
+                <igx-badge dot type="info" [outlined]="properties.outlined"></igx-badge>
                 <span>Info Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge dot type="success"></igx-badge>
+                <igx-badge dot type="success" [outlined]="properties.outlined"></igx-badge>
                 <span>Success Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge dot type="warning"></igx-badge>
+                <igx-badge dot type="warning" [outlined]="properties.outlined"></igx-badge>
                 <span>Warning Dot</span>
             </div>
             <div class="badge-item">
-                <igx-badge dot type="error"></igx-badge>
+                <igx-badge dot type="error" [outlined]="properties.outlined"></igx-badge>
                 <span>Error Dot</span>
             </div>
-            <div class="badge-item">
-                <igx-badge dot outlined type="success"></igx-badge>
-                <span>Outlined Dot</span>
-            </div>
             <div class="badge-item avatar-sample">
                 <igx-avatar icon="face" shape="rounded"></igx-avatar>
-                <igx-badge dot type="success"></igx-badge>
+                <igx-badge dot type="success" [outlined]="properties.outlined"></igx-badge>
                 <span>Dot on Avatar</span>
             </div>
         </div>
@@ -73,23 +66,23 @@ <h3 class="sample-title">Dot Badges</h3>
         <h3 class="sample-title">Type Variants</h3>
         <div class="badge-examples">
             <div class="badge-item">
-                <igx-badge type="primary" value="1"></igx-badge>
+                <igx-badge type="primary" value="1" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Primary</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="info" value="2"></igx-badge>
+                <igx-badge type="info" value="2" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Info</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="success" value="3"></igx-badge>
+                <igx-badge type="success" value="3" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Success</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="warning" value="4"></igx-badge>
+                <igx-badge type="warning" value="4" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Warning</span>
             </div>
             <div class="badge-item">
-                <igx-badge type="error" value="5"></igx-badge>
+                <igx-badge type="error" value="5" [outlined]="properties.outlined" [shape]="properties.shape"></igx-badge>
                 <span>Error</span>
             </div>
         </div>
diff --git a/src/app/badge/badge.sample.scss b/src/app/badge/badge.sample.scss
index 692a4eca183..2260ae94473 100644
--- a/src/app/badge/badge.sample.scss
+++ b/src/app/badge/badge.sample.scss
@@ -1,3 +1,5 @@
+@use '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities' as *;
+
 .wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -23,6 +25,8 @@
     flex-wrap: wrap;
     gap: 32px;
     align-items: center;
+    padding: 16px;
+    background: color($color: 'surface', $variant: 700);
 }
 
 .badge-item {
@@ -33,9 +37,7 @@
     position: relative;
 
     span {
-        font-size: 12px;
-        color: #666;
-        margin-top: 4px;
+        font-size: 14px;
     }
 }
 
diff --git a/src/app/badge/badge.sample.ts b/src/app/badge/badge.sample.ts
index b2f466206af..434998f13f3 100644
--- a/src/app/badge/badge.sample.ts
+++ b/src/app/badge/badge.sample.ts
@@ -3,6 +3,7 @@ import {
     IgxBadgeComponent,
     IgxAvatarComponent,
     IgxIconComponent,
+    IgSizeDirective,
 } from 'igniteui-angular';
 import {
     defineComponents,
@@ -32,11 +33,18 @@ registerIconFromText('bluetooth', bluetooth);
     styleUrls: ['badge.sample.scss'],
     templateUrl: 'badge.sample.html',
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    imports: [IgxBadgeComponent, IgxAvatarComponent, IgxIconComponent]
+    imports: [IgxBadgeComponent, IgxAvatarComponent, IgxIconComponent, IgSizeDirective]
 })
 
 export class BadgeSampleComponent {
     public panelConfig: PropertyPanelConfig = {
+        size: {
+            control: {
+                type: 'button-group',
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium'
+            }
+        },
         shape: {
             control: {
                 type: 'button-group',
@@ -56,12 +64,6 @@ export class BadgeSampleComponent {
                 type: 'boolean',
                 defaultValue: false
             }
-        },
-        dot: {
-            control: {
-                type: 'boolean',
-                defaultValue: false
-            }
         }
     };
 

From c8166506e9d15c8fb97a4ff1c3011d64d646dd28 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Wed, 22 Oct 2025 15:59:59 +0300
Subject: [PATCH 09/13] deps(*): bump theming version

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5849e3ed253..6ef83711baa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@types/source-map": "0.5.2",
         "express": "^5.1.0",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^21.0.2",
+        "igniteui-theming": "^22.0.0-beta.1",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -13403,9 +13403,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "21.0.2",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz",
-      "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==",
+      "version": "22.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0-beta.1.tgz",
+      "integrity": "sha512-9+itoHayUT2h029KTxPqI8lG+JG6u2IgcrIbbml+4MWLzF8bRbPQQkGy9JAsOaRp2+FZUspSLh9kyyZCs3gr/g==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index 37449a322a4..a941b44f90f 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^21.0.2",
+    "igniteui-theming": "^22.0.0-beta.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

From 79a4b61c91a224db6ea624afb1f4c1a6db948772 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 23 Oct 2025 10:43:56 +0300
Subject: [PATCH 10/13] deps(*): bump theming version

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6ef83711baa..58f2d088c33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@types/source-map": "0.5.2",
         "express": "^5.1.0",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^22.0.0-beta.1",
+        "igniteui-theming": "^22.0.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -13403,9 +13403,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "22.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0-beta.1.tgz",
-      "integrity": "sha512-9+itoHayUT2h029KTxPqI8lG+JG6u2IgcrIbbml+4MWLzF8bRbPQQkGy9JAsOaRp2+FZUspSLh9kyyZCs3gr/g==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0.tgz",
+      "integrity": "sha512-usKRq5+XkChbcALOpAzfBMC5Bt8hYkkCVVrtNhnQqa3G7sjj2+Le2wTOHDRMIM8l6HbEoWR/XE7RiQuuMFBVKA==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index a941b44f90f..169ead2725f 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^22.0.0-beta.1",
+    "igniteui-theming": "^22.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

From d4a90f4d11092795826a6629167d5dd5a38def02 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 23 Oct 2025 11:48:33 +0300
Subject: [PATCH 11/13] fix(badge): material theme icon color

---
 .../src/lib/core/styles/components/badge/_badge-theme.scss    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index 81c48e29893..ee77fac3e47 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -71,6 +71,10 @@
     %igx-badge--warn {
         background: color($color: 'warn');
         color: contrast-color($color: 'warn', $variant: 500);
+
+        igx-icon {
+            color: contrast-color($color: 'warn', $variant: 500);
+        }
     }
 
     %igx-badge--error {

From 03db320afbc553aa950911f29509a223c2b6ba02 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 23 Oct 2025 14:04:20 +0300
Subject: [PATCH 12/13] refactor(demos): update badge sample

---
 src/app/badge/badge.sample.scss | 28 ++++++++++++++--------------
 src/styles/_app-layout.scss     |  1 -
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/app/badge/badge.sample.scss b/src/app/badge/badge.sample.scss
index 2260ae94473..126f27254d0 100644
--- a/src/app/badge/badge.sample.scss
+++ b/src/app/badge/badge.sample.scss
@@ -2,9 +2,8 @@
 
 .wrapper {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 48px;
-    padding: 24px;
+    gap: rem(48px);
+    padding: rem(24px);
 }
 
 .badges {
@@ -14,19 +13,14 @@
     gap: 24px;
 }
 
-.sample-title {
-    margin: 16px 0 8px 0;
-    font-size: 18px;
-    font-weight: 600;
-}
-
 .badge-examples {
     display: flex;
     flex-wrap: wrap;
-    gap: 32px;
+    gap: rem(32px);
     align-items: center;
-    padding: 16px;
-    background: color($color: 'surface', $variant: 700);
+    padding: rem(16px);
+    background: color($color: 'gray', $variant: 100);
+    border-radius: rem(8px);
 }
 
 .badge-item {
@@ -46,9 +40,15 @@
     align-items: center;
     position: relative;
 
+    igx-avatar {
+        anchor-name: --avatar;
+    }
+
     igx-badge {
         position: absolute;
-        top: -4px;
-        right: -4px;
+        position-anchor: --avatar;
+        bottom: anchor(--avatar top);
+        left: anchor(right);
+        transform: translate(-75%, 75%);
     }
 }
diff --git a/src/styles/_app-layout.scss b/src/styles/_app-layout.scss
index b8f1cb11ada..4626008c618 100644
--- a/src/styles/_app-layout.scss
+++ b/src/styles/_app-layout.scss
@@ -81,7 +81,6 @@
 
         &-title {
             @include type-style('h6');
-            margin-bottom: 24px;
 
             .light {
                 font-weight: 400;

From 5d9e6870cd756eeb50f040400ec7e68b269597ef Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Wed, 29 Oct 2025 15:36:36 +0200
Subject: [PATCH 13/13] fix(badge): indigo warn state

---
 .../styles/components/badge/_badge-theme.scss | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index ee77fac3e47..82402c29970 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -6,7 +6,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin badge($theme) {
     @include css-vars($theme);
-
+    $theme-variant: map.get($theme, '_meta', 'variant');
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
@@ -70,10 +70,25 @@
 
     %igx-badge--warn {
         background: color($color: 'warn');
-        color: contrast-color($color: 'warn', $variant: 500);
 
-        igx-icon {
+        @if $variant == 'indigo' and $theme-variant == 'light' {
+            color: color($color: 'gray', $variant: 900);
+
+            igx-icon {
+                color: color($color: 'gray', $variant: 900);
+            }
+        } @else if $variant == 'indigo' and $theme-variant == 'dark' {
+            color: color($color: 'gray', $variant: 50);
+
+            igx-icon {
+                color: color($color: 'gray', $variant: 50);
+            }
+        } @else {
             color: contrast-color($color: 'warn', $variant: 500);
+
+            igx-icon {
+                color: contrast-color($color: 'warn', $variant: 500);
+            }
         }
     }