-
Angular Badge
-
-
-
-
- bluetooth
-
+
Angular Badge - Interactive
+
+
+
+ With Value
+
+
+
+ bluetooth
+
+ With Icon
+
+
+
+
+ bluetooth
+
+ On Avatar
+
+
+
+
Size Variants
+
+
+
+ Small
+
+
+
+ Medium
+
+
+
+ Large
+
+
+
+
Dot Type
+
+
+
+ Default Dot
+
+
+
+ Outlined Dot
+
+
+
+
+ Dot on Avatar
+
+
+
+
Type Variants
+
+
+
+ Primary
+
+
+
+ Info
+
+
+
+ Success
+
+
+
+ Warning
+
+
+
+ Error
+
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 7/7] 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.
```
-Using `igx-badge` with different sizes.
+Using `igx-badge` as a dot indicator for notifications.
```html
-
-
-
+
+
```
-Using `igx-badge` as a dot indicator.
+Using different badge types.
```html
-
-
+
+
+
+
+
```
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: `
`,
- imports: [IgxBadgeComponent]
-})
-class InitBadgeWithSizeComponent {
- @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
-}
-
-@Component({
- template: `
`,
+ template: `
`,
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
- *
- * ```
- */
- @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
+ *
+ * ```
+ */
+ @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 @@
Angular Badge - Interactive
[type]="properties.variant"
value="8"
[shape]="properties.shape"
- [size]="properties.size"
[outlined]="properties.outlined"
+ [dot]="properties.dot"
>
With Value