diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx
deleted file mode 100644
index ab21c48d81..0000000000
--- a/docs/angular/src/content/en/components/badge.mdx
+++ /dev/null
@@ -1,449 +0,0 @@
----
-title: Angular Badge Component – Ignite UI for Angular | Infragistics | MIT license
-description: Display an active count or icon in a predefined style to decorate other components anywhere in an application with Ignite UI for Angular Badge control.
-keywords: Angular Badge component, Angular Badge control, Ignite UI for Angular, Angular UI Components
-license: MIT
-llms:
- description: "Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed."
----
-
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Badge Component Overview
-
-
-Angular 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 as icons with a predefined style to communicate information, success, warnings, or errors.
-
-
-## Angular Badge Example
-
-
-
-
-
-## Getting Started with Ignite UI for Angular Badge
-
-To get started with the Ignite UI for Angular Badge component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
-
-```cmd
-ng add igniteui-angular
-```
-
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
-
-The next step is to import the `IgxBadgeModule` in your **app.module.ts** file.
-
-```typescript
-// app.module.ts
-
-...
-import { IgxBadgeModule } from 'igniteui-angular/badge';
-// import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
-
-@NgModule({
- ...
- imports: [..., IgxBadgeModule],
- ...
-})
-export class AppModule {}
-```
-
-Alternatively, as of `16.0.0` you can import the as a standalone dependency.
-
-```typescript
-// home.component.ts
-
-...
-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]
-})
-export class HomeComponent {}
-```
-
-
-This component uses Material Icons. Add the following link to your `index.html`: ``
-
-
-Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the `igx-badge` component.
-
-## Using the Angular Badge Component
-
-Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, we need to import the `IgxAvatarModule`, along with the `IgxBadgeModule`:
-
-```typescript
-// app.module.ts
-...
-import { IgxBadgeModule } from 'igniteui-angular/badge';
-import { IgxAvatarModule } from 'igniteui-angular/avatar';
-// import { IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
-
-@NgModule({
- ...
- imports: [..., IgxBadgeModule, IgxAvatarModule],
- ...
-})
-
-export class AppModule {}
-```
-
-_Alternatively, as of `16.0.0` you can import the and as standalone dependencies._
-
-Next, we will add those components to our template:
-
-```html
-
-
-
-
-```
-
-Using the wrapper, we will position the badge absolutely, covering a little bit of the avatar:
-
-```scss
-.wrapper {
- position: relative;
- margin-top: 15px;
-}
-
-igx-badge {
- position: absolute;
- bottom: 0;
- left: 28px;
-}
-```
-
-### Badge Shape
-
-We can change the badge shape through the attribute setting its value to `square`. By default, the shape of the badge is `rounded`.
-
-```html
-
-```
-
-If everything's done right, you should see the demo sample shown above in your browser.
-
-### Badge Size
-
-The size of the badge can be controlled using the `--size` variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the `caption` typography style for its font-size and line-height. For that reason, when setting the `--size` of a badge containing text to values below 16px, you will also need to modify its typography.
-
-Example:
-
-```scss
-igx-badge {
- --size: 12px;
-
- font-size: calc(var(--size) / 2);
- line-height: normal;
-}
-```
-
-### Badge Value and Icon
-
-Use the `[value]` input to display text or a numeric count inside the badge:
-
-```html
-
-```
-
-Use the `[icon]` input to display an icon inside the badge:
-
-```html
-
-```
-
-When both `[icon]` and `[value]` are set, the badge displays both simultaneously:
-
-```html
-
-
-```
-
-Or you can project content directly:
-
-```html
- {{ model.value }}
-
-
-
- bluetooth
- Bluetooth
-
-```
-
-### Badge Icon
-
-In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](/material-icons-extended) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it:
-
-```ts
-export class BadgeIconComponent implements OnInit {
- constructor (protected _iconService: IgxIconService) {}
-
- public ngOnInit() {
- this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
- }
-}
-```
-
-Then, just specify the icon name and family as follows:
-
-```html
-
-```
-
-
-
-### Outlined Badge
-
-The `igx-badge` component can also have a subtle border around it when its attribute is set.
-
-```html
-
-```
-
-
-
-The color of the border can also be customized with the `$border-color` property from the .
-
-### Dot Badge
-
-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
-
-```
-
-
-
-### Badge in List
-
-Let's extend the previous sample and create a list with contacts, similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we're using the and components. For a container, is used.
-
-To continue, include all needed modules and import them in the **app.module.ts** file.
-
-```typescript
-// app.module.ts
-
-...
-import { IgxListModule } from 'igniteui-angular/list';
-import { IgxAvatarModule } from 'igniteui-angular/avatar';
-import { IgxBadgeModule } from 'igniteui-angular/badge';
-// import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
-
-@NgModule({
- ...
- imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
-})
-export class AppModule {}
-```
-
-
-The has and inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either `Default`, `Info`, `Success`, `Warning`, or `Error`. Each type applies a specific background color, which takes precedence over any custom background color.
-
-
-In our sample, and are bound to model properties named _icon_ and _type_.
-
-Next, we're adding the contacts in our template:
-
-```html
-{/* contacts.component.html */}
-
-
-
- Team Members (4)
-
-
-
-
-
-
-
-
- {{ member.name }}
-
-
-
-
-```
-
-We're going to create our members in the typescript file like this:
-
-```typescript
-// 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'),
-];
-
-```
-
-```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;
- }
- }
-}
-```
-
-Position the badge in its parent container:
-
-```css
-/* contacts.component.css */
-
-.wrapper {
- display: flex;
- flex-direction: row;
-}
-
-.contact-name {
- font-weight: 600;
-}
-
-.contact-container {
- margin-left: 20px;
-}
-
-.badge-style {
- position: absolute;
- bottom: 2.5px;
- left: 40px;
-}
-
-```
-
-If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge, showing its current state.
-
-
-
-## Styling
-
-### Badge Theme Property Map
-
-Changing the `$background-color` property automatically updates the following dependent properties:
-
-| Primary Property | Dependent Property | Description |
-| --- | --- | --- |
-| **$background-color** | $icon-color | The color used for icons in the badge. |
-| | $text-color | The color used for text in the badge. |
-
-To get started with styling the badges, we need to import the `index` file, where all the theme functions and component mixins live:
-
-```scss
-@use "igniteui-angular/theming" as *;
-
-// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
-// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
-
-Following the simplest approach, we create a new theme that extends the and accepts some parameters that style the badge's items. When you set the `$background-color`, the `$icon-color` and `$text-color` are automatically assigned based on which offers better contrast—black or white. Note that the `$border-radius` property only takes effect when the badge's is set to `square`.
-
-```scss
-$custom-badge-theme: badge-theme(
- $background-color: #57a5cd,
- $border-radius: 4px
-);
-```
-
-To include the new theme we use the `tokens` mixin:
-
-```scss
-:host {
- @include tokens($custom-badge-theme);
-}
-```
-
-### Demo
-
-
-
-### Styling with Tailwind
-
-You can style the `badge` using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
-
-Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
-
-```scss
-@import "tailwindcss";
-...
-@use 'igniteui-theming/tailwind/utilities/material.css';
-```
-
-The utility file includes both `light` and `dark` theme variants.
-
-- Use `light-*` classes for the light theme.
-- Use `dark-*` classes for the dark theme.
-- Append the component name after the prefix, e.g., `light-badge`, `dark-badge`.
-
-Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).
-
-You can find the full list of properties in the . The syntax is as follows:
-
-```html
-
-
-```
-
-
-The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
-
-
-At the end your badges should look like this:
-
-
-
-
-
-## API References
-
--
--
--
--
--
--
-## Theming Dependencies
-
--
-
-## Additional Resources
-
-
-
-Our community is active and always welcoming to new ideas.
-
-- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/en/images/badge/badge-anatomy-schema.png b/docs/angular/src/content/en/images/badge/badge-anatomy-schema.png
new file mode 100644
index 0000000000..5e2329c093
Binary files /dev/null and b/docs/angular/src/content/en/images/badge/badge-anatomy-schema.png differ
diff --git "a/docs/angular/src/content/en/images/badge/badge-do-n\320\276t.png" "b/docs/angular/src/content/en/images/badge/badge-do-n\320\276t.png"
new file mode 100644
index 0000000000..6b8bd52121
Binary files /dev/null and "b/docs/angular/src/content/en/images/badge/badge-do-n\320\276t.png" differ
diff --git a/docs/angular/src/content/en/images/badge/badge-do.png b/docs/angular/src/content/en/images/badge/badge-do.png
new file mode 100644
index 0000000000..b8374e9278
Binary files /dev/null and b/docs/angular/src/content/en/images/badge/badge-do.png differ
diff --git a/docs/xplat/src/assets/images/badge/badge-anatomy-schema.png b/docs/xplat/src/assets/images/badge/badge-anatomy-schema.png
new file mode 100644
index 0000000000..5e2329c093
Binary files /dev/null and b/docs/xplat/src/assets/images/badge/badge-anatomy-schema.png differ
diff --git "a/docs/xplat/src/assets/images/badge/badge-do-n\320\276t.png" "b/docs/xplat/src/assets/images/badge/badge-do-n\320\276t.png"
new file mode 100644
index 0000000000..6b8bd52121
Binary files /dev/null and "b/docs/xplat/src/assets/images/badge/badge-do-n\320\276t.png" differ
diff --git a/docs/xplat/src/assets/images/badge/badge-do.png b/docs/xplat/src/assets/images/badge/badge-do.png
new file mode 100644
index 0000000000..b8374e9278
Binary files /dev/null and b/docs/xplat/src/assets/images/badge/badge-do.png differ
diff --git a/docs/xplat/src/content/en/components/inputs/badge.mdx b/docs/xplat/src/content/en/components/inputs/badge.mdx
index 333eea4044..955b11987e 100644
--- a/docs/xplat/src/content/en/components/inputs/badge.mdx
+++ b/docs/xplat/src/content/en/components/inputs/badge.mdx
@@ -1,7 +1,6 @@
---
-title: "{Platform} Badge | Infragistics"
-description: Infragistics' {Platform} Badge component allows you to display content in a predefined style to decorate other components anywhere in an application.
-keywords: "{Platform}, UI controls, web widgets, UI widgets, Web Components, {Platform} Badge Components, Infragistics"
+title: "Badge"
+description: "The {ProductName} Badge displays a short status, category, count, or notification indicator alongside another component."
license: MIT
mentionedTypes: ["Badge"]
llms:
@@ -10,28 +9,70 @@ llms:
import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
+import { Image } from 'astro:assets';
+import badgeAnatomy from '@xplat-images/badge/badge-anatomy-schema.png';
+import badgeDo from '@xplat-images/badge/badge-do.png';
+import badgeDoNot from '@xplat-images/badge/badge-do-nоt.png';
-# {Platform} Badge Overview
+# Badge Component
-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.
+The {Platform} Badge component is provided by the platform-specific {ProductName} package and is 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
+**Last updated:** July 22, 2026
-
+## Live Demo
-
+The {Platform} Badge demo shows how the component can communicate a compact status or notification next to another interface element.
-## Usage
+
+
+
+
+
+
+
+
+
+
+
+
+## Anatomy
+
+The {Platform} Badge presents a compact label or dot indicator that decorates another interface element.
+
+
+
+1. Dot indicator: A small badge dot used to show a status or a new update.
+2. Icon: Represents the type of status or action.
+3. Container: The badge shape that holds and styles the icon or label.
+4. Label: Text or a number displayed inside the badge.
+
+The component renders its content inside the `base` CSS part. Use the component's default slot for text or other inline content; when `dot` is enabled, the badge renders as an indicator without content.
+
+```text
+
+└── ::part(base)
+ └── default slot content
+
+```
+
+## Getting Started
+
+To use the {Platform} Badge, follow the [{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the component for your target platform.
+
+### Prerequisites and Version Compatibility
+
+Use a supported version of the {ProductName} package for your target framework. Keep the framework package, the Badge package, and the theme package on the same release version. The examples below identify the framework and package used by each code block so that the snippets remain self-contained when read without the surrounding page context.
-First, you need to install the {ProductName} by running the following command:
+For Web Components using the **{PackageWebComponents}** package, install the package:
```cmd
npm install {PackageWebComponents}
```
-You will then need to import the , its necessary CSS, and register its module, like so:
+You will then need to import the , its theme CSS, and register the component, like so:
```ts
import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
@@ -40,19 +81,17 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcBadgeComponent);
```
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
-
-First, you need to the install the corresponding {ProductName} npm package by running the following command:
+For React using the **igniteui-react** package, install the package:
```cmd
npm install igniteui-react
```
-You will then need to import the and its necessary CSS like so:
+You will then need to import the Badge wrapper and its theme CSS, like so:
```tsx
import { IgrBadge } from 'igniteui-react';
@@ -63,7 +102,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
-Before using the , you need to register it as follows:
+For Blazor using the **IgniteUI.Blazor** package, register the Badge module as follows:
```csharp
// in Program.cs file
@@ -79,10 +118,34 @@ You will also need to link an additional CSS file to apply the styling to the
+
+
+For Angular using the **igniteui-angular** package, install the package:
+
+```cmd
+npm install igniteui-angular
+```
+
+Then import the Badge component:
+
+```ts
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
+```
+
+Add `IgxBadgeComponent` to the component `imports` collection, then use the `igx-badge` element in your template.
+
The simplest way to start using the is as follows:
+```html
+
+```
+
+
+
+The simplest way to start using the is as follows:
+
```html
```
@@ -105,43 +168,375 @@ The simplest way to start using the is as fo
-## Examples
+## Usage
+
+Use the {Platform} Badge to display a short status, category, count, or notification indicator alongside another component.
+
+
+
+Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, import the `IgxAvatarModule` together with the `IgxBadgeModule`:
+
+```typescript
+import { IgxBadgeModule } from 'igniteui-angular/badge';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+```
+
+Add both modules to the component `imports` collection, or import the standalone components. Then add the components to your template:
+
+```html
+
+
+## Properties
+
+The {Platform} Badge exposes platform-specific properties for controlling its content, appearance, and indicator behavior.
+
+
+
+The Angular Badge exposes the following properties. Use the API reference for the complete type definitions.
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| | boolean | `false` | Renders the Badge as a dot indicator without content. |
+| | boolean | `false` | Displays an outline around the Badge. |
+| | BadgeShape | `rounded` | Sets the Badge shape. |
+| | BadgeType | `default` | Sets the Angular Badge stylistic type. |
+| | string | — | Applies a custom CSS class. |
+
+
+
+
+
+The React Badge exposes the following properties.
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| | boolean | `false` | Renders the Badge as a dot indicator. |
+| | boolean | `false` | Displays an outline around the Badge. |
+| | BadgeShape | `rounded` | Sets the Badge shape. |
+| | StyleVariant | `primary` | Sets the Badge stylistic variant. |
+
+
+
+
+
+The Web Components Badge exposes the following properties.
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| | boolean | `false` | Renders the Badge as a dot indicator. |
+| | boolean | `false` | Displays an outline around the Badge. |
+| | BadgeShape | `rounded` | Sets the Badge shape. |
+| | StyleVariant | `primary` | Sets the Badge stylistic variant. |
+| | CSSResult | — | Applies custom styles. |
+
+
+
+
+
+The Blazor Badge exposes the following properties.
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| | boolean | `false` | Renders the Badge as a dot indicator. |
+| | boolean | `false` | Displays an outline around the Badge. |
+| | BadgeShape | `rounded` | Sets the Badge shape. |
+| | StyleVariant | `primary` | Sets the Badge stylistic variant. |
+
+
## Styling
-The component exposes a `base` CSS part that can be used to change all of its style properties.
+The {Platform} Badge uses the component's `base` CSS part and documented styling variables to customize its appearance.
+
+### Sass Theming
+
+Use the {ProductName} theme system to style the Badge consistently with the rest of your application.
+
+### CSS Variables
```css
igc-badge::part(base) {
@@ -244,11 +750,123 @@ igc-badge::part(base) {
}
```
-
+| variable | what it changes |
+| --- | --- |
+| `--background-color` | The badge background color. |
+| `--border-radius` | The badge corner radius. |
+| `--border-color` | The outlined badge border color. |
+
+### Style Parts
+
+| part | what it styles |
+| --- | --- |
+| `base` | The Badge root element. |
+
+
+
+
+
+### Styling with Tailwind
+
+You can style the Badge using custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
+
+Along with the Tailwind import in your global stylesheet, include the utility file:
+
+```scss
+@import "tailwindcss";
+@use 'igniteui-theming/tailwind/utilities/material.css';
+```
+
+Use `light-badge` and `dark-badge` for the light and dark theme variants. You can override the generated CSS variables with arbitrary properties:
+
+```html
+
+
+```
+
+The exclamation mark (`!`) ensures that the utility class takes precedence over the component's default theme.
+
+
+
+
+
+
+
+
+
+
+
+## Accessibility
+
+The {Platform} Badge communicates a visual status and must have meaningful text or surrounding accessible context when that status is important.
+
+### Keyboard Interaction
+
+The Badge is a visual status indicator and does not provide an interactive keyboard action. It is reached according to the focus behavior of the element it decorates.
+
+### Screen Readers / ARIA
+
+Provide meaningful visible content or an accessible label in the surrounding component when the Badge conveys information that is not otherwise available to assistive technology. Verify the resulting announcement for the specific surrounding control.
+
+### Accessibility Compliance
+
+Accessibility conformance for this component must be verified against the official product accessibility statement and the rendered usage context.
+
+## Troubleshooting
+
+The {Platform} Badge troubleshooting guidance follows a problem → cause → fix format for common styling and content issues.
+
+### Why does my custom background color not change the Badge?
+
+The selected `variant` takes precedence over the `--background-color` CSS variable. To use a custom background color, avoid setting a variant that applies its own background color.
+
+### Why is my dot Badge not displaying content?
+
+The `dot` property renders the Badge as a minimal indicator and does not support content. Use a regular Badge when you need to display text or other inline content.
+
+## Known Limitations
+
+The {Platform} Badge has the following platform-independent limitations.
+
+- A dot Badge is an indicator only and cannot display text or an icon.
+- Badge styling and variant/type names differ between Angular and the other supported frameworks. Use the platform-specific examples and API links on this page rather than copying an attribute between frameworks.
+- The Badge is a visual status indicator and does not provide keyboard interaction of its own.
## API References
+
+The {Platform} Badge API reference lists the complete verified API surface for the target platform.
+
+## Dependencies
+
+The {Platform} Badge requires a theme stylesheet to apply its visual styling. See the framework-specific setup in **Getting Started**.
+
## Additional Resources
+The following resources provide additional {Platform} Badge guidance and project support.
+
- [{ProductName} **Forums**]({ForumsLink})
- [{ProductName} **GitHub**]({GithubLink})
+
+## Related Components
+
+The {Platform} Badge is commonly used with related components such as Avatar when a status indicator belongs to another visual element.
+
+- [Avatar](../layouts/avatar.mdx) — combine an Avatar with a Badge to show a status indicator.
+
+## FAQ
+
+These frequently asked questions cover common {Platform} Badge content, indicator, and package choices.
+
+### Can a Badge display both an icon and text?
+
+Yes. Use the platform-specific value and icon APIs shown in **Usage**. When projecting content directly, keep the icon and text in the component's default content area.
+
+### How do I display a notification dot without content?
+
+Set the platform-specific `dot` property or attribute. A dot Badge intentionally renders without text or other content.
+
+### Which package should I install for Badge?
+
+Use `igniteui-angular` for Angular, `igniteui-react` for React, `igniteui-webcomponents` for Web Components, and `IgniteUI.Blazor` for Blazor. Keep related Ignite UI packages on the same release version.
diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json
index 17c916bd26..58d158d7b1 100644
--- a/docs/xplat/src/content/en/toc.json
+++ b/docs/xplat/src/content/en/toc.json
@@ -70,8 +70,7 @@
},
{
"exclude": [
- "Blazor",
- "Angular"
+ "Blazor"
],
"name": "Getting Started",
"href": "general-getting-started.mdx",
@@ -2223,9 +2222,6 @@
"href": "layouts/accordion.mdx"
},
{
- "exclude": [
- "Angular"
- ],
"name": "Avatar",
"href": "layouts/avatar.mdx"
},
@@ -2434,9 +2430,6 @@
"header": true
},
{
- "exclude": [
- "Angular"
- ],
"name": "Badge",
"href": "inputs/badge.mdx"
},