diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx
index 3fd3b53906..60ee7b736f 100644
--- a/docs/angular/src/content/en/components/badge.mdx
+++ b/docs/angular/src/content/en/components/badge.mdx
@@ -41,9 +41,9 @@ import { IgxBadgeModule } from 'igniteui-angular/badge';
// import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
- ...
- imports: [..., IgxBadgeModule],
- ...
+ ...
+ imports: [..., IgxBadgeModule],
+ ...
})
export class AppModule {}
```
@@ -58,11 +58,11 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
- selector: 'app-home',
- template: '',
- styleUrls: ['home.component.scss'],
- standalone: true,
- imports: [IgxBadgeComponent]
+ selector: 'app-home',
+ template: '',
+ styleUrls: ['home.component.scss'],
+ standalone: true,
+ imports: [IgxBadgeComponent]
})
export class HomeComponent {}
```
@@ -99,9 +99,8 @@ Next, we will add those components to our template:
```html
-
-
-
+
+
```
@@ -184,11 +183,11 @@ In addition to material icons, the `igx-badge` component also supports usage of
```ts
export class BadgeIconComponent implements OnInit {
- constructor (protected _iconService: IgxIconService) {}
+ constructor (protected _iconService: IgxIconService) {}
- public ngOnInit() {
- this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
- }
+ public ngOnInit() {
+ this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
+ }
}
```
@@ -200,9 +199,23 @@ Then, just specify the icon name and family as follows:
+### Outlined Badge
+
+The `igx-badge` component can also have a subtle border around it when its attribute is set.
+
+```html
+
+```
+
+
+
### Dot Badge
-The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
+The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
+
+```html
+
+```
@@ -222,8 +235,8 @@ import { IgxBadgeModule } from 'igniteui-angular/badge';
// import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
- ...
- imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
+ ...
+ imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
})
export class AppModule {}
```
@@ -245,18 +258,13 @@ Next, we're adding the contacts in our template:
-
{{ member.name }}
-
-
-
+
@@ -268,42 +276,41 @@ We're going to create our members in the typescript file like this:
// contacts.component.ts
...
- public members: Member[] = [
- new Member('Terrance Orta', 'online'),
- new Member('Donna Price', 'online'),
- new Member('Lisa Landers', 'away'),
- new Member('Dorothy H. Spencer', 'offline'),
- ];
+public members: Member[] = [
+ new Member('Terrance Orta', 'online'),
+ new Member('Donna Price', 'online'),
+ new Member('Lisa Landers', 'away'),
+ new Member('Dorothy H. Spencer', 'offline'),
+];
```
```typescript
-
...
class Member {
- public name: string;
- public status: string;
- public type: string;
- public icon: string;
-
- constructor(name: string, status: string) {
- this.name = name;
- this.status = status;
- switch (status) {
- case 'online':
- this.type = 'success';
- this.icon = 'check';
- break;
- case 'away':
- this.type = 'warning';
- this.icon = 'schedule';
- break;
- case 'offline':
- this.type = 'error';
- this.icon = 'remove';
- break;
- }
+ public name: string;
+ public status: string;
+ public type: string;
+ public icon: string;
+
+ constructor(name: string, status: string) {
+ this.name = name;
+ this.status = status;
+ switch (status) {
+ case 'online':
+ this.type = 'success';
+ this.icon = 'check';
+ break;
+ case 'away':
+ this.type = 'warning';
+ this.icon = 'schedule';
+ break;
+ case 'offline':
+ this.type = 'error';
+ this.icon = 'remove';
+ break;
}
+ }
}
```
@@ -313,16 +320,16 @@ Position the badge in its parent container:
/* contacts.component.css */
.wrapper {
- display: flex;
- flex-direction: row;
+ display: flex;
+ flex-direction: row;
}
.contact-name {
- font-weight: 600;
+ font-weight: 600;
}
.contact-container {
- margin-left: 20px;
+ margin-left: 20px;
}
.badge-style {
@@ -414,8 +421,10 @@ At the end your badges should look like this:
-## API References
+
+## API References
+
-
-
-
diff --git a/docs/xplat/src/content/en/components/inputs/badge.mdx b/docs/xplat/src/content/en/components/inputs/badge.mdx
index abdc93c39e..f8ebcdd438 100644
--- a/docs/xplat/src/content/en/components/inputs/badge.mdx
+++ b/docs/xplat/src/content/en/components/inputs/badge.mdx
@@ -9,24 +9,20 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# {Platform} Badge Overview
The {ProductName} Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed with predefined styles to communicate information, success, warnings, or errors.
## {Platform} Badge Example
-
-
+
## Usage
-
-
First, you need to install the {ProductName} by running the following command:
```cmd
@@ -44,14 +40,10 @@ defineComponents(IgcBadgeComponent);
For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
-
-
-
-
First, you need to the install the corresponding {ProductName} npm package by running the following command:
```cmd
@@ -67,12 +59,8 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-
-
-
Before using the , you need to register it as follows:
```razor
@@ -87,10 +75,8 @@ You will also need to link an additional CSS file to apply the styling to the
```
-
-
The simplest way to start using the is as follows:
@@ -117,12 +103,16 @@ The simplest way to start using the is as fo
-To display a subtle border around the badge, you can set the attribute of the badge.
+## Examples
+
+### Variants
+
+The {ProductName} badge supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - `primary`(default), `info`, `success`, `warning`, or `danger` to the attribute.
```tsx
-
+
```
@@ -130,7 +120,7 @@ To display a subtle border around the badge, you can set the
```html
-
+
```
@@ -138,21 +128,21 @@ To display a subtle border around the badge, you can set the
```razor
-
+
```
-## Examples
+
-### Variants
+### Shape
-The {ProductName} badge supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - `primary`(default), `info`, `success`, `warning`, or `danger` to the attribute.
+The badge component supports `rounded`(default) and `square` shapes. These values can be assigned to the attribute.
```tsx
-
+
```
@@ -160,7 +150,7 @@ The {ProductName} badge supports several pre-defined stylistic variants. You can
```html
-
+
```
@@ -168,24 +158,21 @@ The {ProductName} badge supports several pre-defined stylistic variants. You can
```razor
-
+
```
-
-
-
+
+### Outlined
-### Shape
-
-The badge component supports `rounded`(default) and `square` shapes. These values can be assigned to the attribute.
+The badge can also have a subtle border around it when the attribute is set.
```tsx
-
+
```
@@ -193,7 +180,7 @@ The badge component supports `rounded`(default) and `square` shapes. These value
```html
-
+
```
@@ -201,14 +188,12 @@ The badge component supports `rounded`(default) and `square` shapes. These value
```razor
-
+
```
-
-
-
+
### Dot
@@ -240,24 +225,19 @@ The {ProductName} badge component can also render as a minimal dot indicator for
-
-
## Styling
The component exposes a `base` CSS part that can be used to change all of its style properties.
```css
igc-badge::part(base) {
- --background-color: var(--ig-error-A100);
- --border-radius: 2px;
+ --background-color: var(--ig-error-A100);
+ --border-radius: 2px;
}
```
-
-
-
## API References
## Additional Resources