IgniteUI · ChronosSF · Sep 9, 2026 · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026
diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx
diff --git a/docs/angular/src/content/en/components/dialog.mdx b/docs/angular/src/content/en/components/dialog.mdx
@@ -294,7 +294,7 @@ $my-dialog-theme: dialog-theme(
 ```
 
 <DocsAside type="info">
-In order to style any additional components that are used as part of the dialog window's content (such as the [`IgxButton`](/button)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application).
+In order to style any additional components that are used as part of the dialog window's content (such as the [`IgxButton`](./inputs/button.mdx)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application).
 </DocsAside>
 
 ```scss

diff --git a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx
@@ -415,7 +415,7 @@ Related topics:
 - [Component Themes](../sass/component-themes.mdx)
 - [Typography](../sass/typography.mdx)
 - [Avatar Component](../../layouts/avatar.mdx)
-- [Button Component](../../button.mdx)
+- [Button Component](inputs/button)
 - [Dialog Component](../../dialog.mdx)
 - [Icon Component](../../icon.mdx)
 - [Expansion Panel Component](../../expansion-panel.mdx)

diff --git a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx
@@ -368,7 +368,7 @@ Ignite UI for Angular exposes four default type scales for each of its themes, w
 - [Component Themes](/themes/sass/component-themes)
 - [Typography](/themes/sass/typography)
 - [Avatar Component](../../layouts/avatar.mdx)
-- [Button Component](/button)
+- [Button Component](inputs/button)
 - [Dialog Component](/dialog)
 - [Icon Component](/icon)
 - [List Component](/list)

diff --git a/docs/angular/src/content/en/components/themes/roundness.mdx b/docs/angular/src/content/en/components/themes/roundness.mdx
@@ -20,7 +20,7 @@ Many Ignite UI components have predefined minimum and maximum border-radius valu
 When you set `--ig-radius-factor` to 0, the component uses its minimum border-radius and will appear more block-like with sharp corners. When set to 1, the component uses its maximum predefined border-radius and will appear rounded.
 
 Here is a list of the components that have predefined minimum and maximum border-radius values and can be modified using the `--ig-radius-factor` variable: <br/>
-• [Action Strip](/action-strip) • [Button](/button) • [Button Group](/inputs/button-group) • [Calendar](/calendar) • [Card](/card) • [Carousel](/carousel) • [Checkbox](/checkbox) • [Chip](/chip) • [Combo](/combo) • [Date Picker](/date-picker) • [Date Range Picker](/date-range-picker) • [Grid](/grid/grid) • [Input Group](/input-group) • [Linear Progress](/linear-progress) • [List](/list) • [Month Picker](/month-picker) • [Navigation Drawer](/navdrawer) • [Radio](/radio-button) • [Ripple](/ripple) • [Snackbar](/snackbar) • [Switch](/switch) • [Toast](/toast)
+• [Action Strip](/action-strip) • [Button](inputs/button) • [Button Group](/inputs/button-group) • [Calendar](/calendar) • [Card](/card) • [Carousel](/carousel) • [Checkbox](/checkbox) • [Chip](/chip) • [Combo](/combo) • [Date Picker](/date-picker) • [Date Range Picker](/date-range-picker) • [Grid](/grid/grid) • [Input Group](/input-group) • [Linear Progress](/linear-progress) • [List](/list) • [Month Picker](/month-picker) • [Navigation Drawer](/navdrawer) • [Radio](/radio-button) • [Ripple](/ripple) • [Snackbar](/snackbar) • [Switch](/switch) • [Toast](/toast)
 
 ## Usage
 

diff --git a/docs/angular/src/content/en/components/time-picker.mdx b/docs/angular/src/content/en/components/time-picker.mdx
@@ -408,7 +408,7 @@ $my-time-picker-theme: time-picker-theme(
 ```
 
 <DocsAside type="info">
-In order to style any additional components that are used as part of the time picker window's content (such as the [`IgxButton`](/button)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application).
+In order to style any additional components that are used as part of the time picker window's content (such as the [`IgxButton`](./inputs/button.mdx)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application).
 </DocsAside>
 
 Since the time picker window uses the [`IgxOverlayService`](/overlay), in order for our custom theme to reach down the time picker window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible.

diff --git a/docs/angular/src/content/en/components/toc.json b/docs/angular/src/content/en/components/toc.json
@@ -1979,7 +1979,7 @@
   },
   {
     "name": "Button",
-    "href": "button.mdx"
+    "href": "inputs/button.mdx"
   },
   {
     "name": "Button Group",

diff --git a/docs/angular/src/content/en/components/tooltip.mdx b/docs/angular/src/content/en/components/tooltip.mdx
@@ -486,7 +486,7 @@ $dark-tooltip: tooltip-theme(
 ```
 
 <DocsAside type="info">
-In order to style any additional components that are used as part of the tooltip's content (such as [`IgxButton`](/button), [`IgxSwitch`](/switch), etc.), an additional theme should be created that is specific to the respective component and placed under the tooltip's scope only (so it does not affect the rest of the application).
+In order to style any additional components that are used as part of the tooltip's content (such as [`IgxButton`](./inputs/button.mdx), [`IgxSwitch`](/switch), etc.), an additional theme should be created that is specific to the respective component and placed under the tooltip's scope only (so it does not affect the rest of the application).
 </DocsAside>
 
 Since the tooltip uses the [`IgxOverlayService`](/overlay), in order for our custom theme to reach down the tooltip that we want to style, we will provide a specific outlet where the tooltip will be placed in the DOM when it is visible.

diff --git a/docs/angular/src/content/en/grids_templates/row-editing.mdx b/docs/angular/src/content/en/grids_templates/row-editing.mdx
@@ -320,9 +320,9 @@ If you want the buttons to be part of the keyboard navigation, then each on of t
 Using the [Ignite UI for Angular Theme Library](/themes), we can greatly alter the Row Editing overlay.
 The Row Editing overlay is a composite element - its UI is comprised of a couple of other components:
     - [`igx-banner`](/banner) in order to render its contents
-    - [`igx-button`](/button)s are rendered in the default template (for the `Done` and `Cancel` buttons).
+    - [`igx-button`](inputs/button)s are rendered in the default template (for the `Done` and `Cancel` buttons).
 
-In the below example, we will make use of those two components' styling options, [`button styling`](/button#styling) & [`banner-styling`](/banner#styling), to customize the experience of our {ComponentName}'s Row Editing.
+In the below example, we will make use of those two components' styling options, [`button styling`](inputs/button#styling) & [`banner-styling`](/banner#styling), to customize the experience of our {ComponentName}'s Row Editing.
 We will also style the current cell's editor and background to make it more distinct.
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">

diff --git a/docs/angular/src/content/en/grids_templates/search.mdx b/docs/angular/src/content/en/grids_templates/search.mdx
@@ -260,7 +260,7 @@ What if we would like to filter and sort our {ComponentTitle} or even to add and
 ### Adding icons
 
 By using some of our other components, we can create an enriched user interface and improve the overall design of our entire search bar! We can have a nice search or delete icon on the left of the search input, a couple of chips for our search options and some material design icons combined with nice ripple styled buttons for our navigation on the right. We can wrap these components inside an input group for a more refined design.
-To do this, let's go and grab the [**IgxInputGroup**](/input-group), [**IgxIcon**](/icon),  [**IgxRipple**](/ripple), [**IgxButton**](/button) and the [**IgxChip**](/chip) modules.
+To do this, let's go and grab the [**IgxInputGroup**](/input-group), [**IgxIcon**](/icon),  [**IgxRipple**](/ripple), [**IgxButton**](inputs/button) and the [**IgxChip**](/chip) modules.
 
 ```typescript
 // app.module.ts

diff --git a/docs/angular/src/content/en/images/anatomy-content-light/button-lt-a.png b/docs/angular/src/content/en/images/anatomy-content-light/button-lt-a.png
diff --git a/docs/angular/src/content/en/images/button/button-do-1.png b/docs/angular/src/content/en/images/button/button-do-1.png
diff --git a/docs/angular/src/content/en/images/button/button-do-2.png b/docs/angular/src/content/en/images/button/button-do-2.png
diff --git a/docs/angular/src/content/en/images/button/button-do-3.png b/docs/angular/src/content/en/images/button/button-do-3.png
diff --git a/docs/angular/src/content/en/images/button/button-do-not-1.png b/docs/angular/src/content/en/images/button/button-do-not-1.png
diff --git a/docs/angular/src/content/en/images/button/button-do-not-2.png b/docs/angular/src/content/en/images/button/button-do-not-2.png
diff --git a/docs/angular/src/content/en/images/button/button-do-not-3.png b/docs/angular/src/content/en/images/button/button-do-not-3.png
diff --git a/docs/xplat/src/assets/images/button/button-do-1.png b/docs/xplat/src/assets/images/button/button-do-1.png
diff --git a/docs/xplat/src/assets/images/button/button-do-2.png b/docs/xplat/src/assets/images/button/button-do-2.png
diff --git a/docs/xplat/src/assets/images/button/button-do-3.png b/docs/xplat/src/assets/images/button/button-do-3.png
diff --git a/docs/xplat/src/assets/images/button/button-do-not-1.png b/docs/xplat/src/assets/images/button/button-do-not-1.png
diff --git a/docs/xplat/src/assets/images/button/button-do-not-2.png b/docs/xplat/src/assets/images/button/button-do-not-2.png
diff --git a/docs/xplat/src/assets/images/button/button-do-not-3.png b/docs/xplat/src/assets/images/button/button-do-not-3.png
diff --git a/docs/xplat/src/content/en/components/inputs/badge.mdx b/docs/xplat/src/content/en/components/inputs/badge.mdx
@@ -79,18 +79,18 @@ The component renders its content inside the `base` CSS part. Use the component'
 
 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.
-
-<PlatformBlock for="WebComponents">
+<PlatformBlock for="React,WebComponents">
 
-For Web Components using the **{PackageWebComponents}** package, install the package:
+For {Platform} using the **{PackageCommon}** package, install the package:
 
 ```cmd
-npm install {PackageWebComponents}
+npm install {PackageCommon}
 ```
 
+</PlatformBlock>
+
+<PlatformBlock for="WebComponents">
+
 You will then need to import the <ApiLink pkg="core" type="Badge" />, its theme CSS, and register the component, like so:
 
 ```ts
@@ -104,12 +104,6 @@ defineComponents(IgcBadgeComponent);
 
 <PlatformBlock for="React">
 
-For React using the **igniteui-react** package, install the package:
-
-```cmd
-npm install igniteui-react
-```
-
 You will then need to import the Badge wrapper and its theme CSS, like so:
 
 ```tsx
@@ -145,16 +139,18 @@ For Angular using the **igniteui-angular** package, install the package:
 npm install igniteui-angular
 ```
 
-Then import the Badge component:
+Then import `IgxBadgeComponent` in the component `imports` collection.
 
 ```ts
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 ```
 
-Add `IgxBadgeComponent` to the component `imports` collection, then use the `igx-badge` element in your template.
+</PlatformBlock>
 
 The simplest way to start using the <ApiLink pkg="core" type="Badge" /> is as follows:
 
+<PlatformBlock for="Angular">
+
 ```html
 <igx-badge></igx-badge>
 ```
@@ -163,8 +159,6 @@ The simplest way to start using the <ApiLink pkg="core" type="Badge" /> is as fo
 
 <PlatformBlock for="WebComponents">
 
-The simplest way to start using the <ApiLink pkg="core" type="Badge" /> is as follows:
-
 ```html
 <igc-badge></igc-badge>
 ```
@@ -794,25 +788,30 @@ Use the {ProductName} theme system to style the Badge consistently with the rest
 
 ### CSS Variables
 
-```css
-igc-badge::part(base) {
-  --background-color: var(--ig-error-A100);
-  --border-radius: 2px;
-}
-```
-
 | variable | what it changes |
 | --- | --- |
 | `--background-color` | The badge background color. |
+| `--border-color` | The badge border color. |
 | `--border-radius` | The badge corner radius. |
-| `--border-color` | The outlined badge border color. |
+| `--elevation` | The badge shadow. |
+| `--icon-color` | The badge icon color. |
+| `--text-color` | The badge text color. |
+| `--size` | The badge size. |
+| `--dot-size` | The size of the dot-type badge. |
 
 ### Style Parts
 
 | part | what it styles |
 | --- | --- |
 | `base` | The Badge root element. |
 
+```css
+igc-badge::part(base) {
+  --background-color: var(--ig-error-A100);
+  --border-radius: 2px;
+}
+```
+
 <PlatformBlock for="Angular">
 
 <Sample src="/data-display/badge-styling" height={212} position="center" noBorder={false} spacing="md" alt="Angular Badge styling example" />
@@ -933,7 +932,7 @@ Your responsibilities:
 
 ## Troubleshooting
 
-The {Platform} Badge troubleshooting guidance follows a problem → cause → fix format for common styling and content issues.
+Use this section to check boundaries and common decisions before treating Badge as an interactive control or the only indication of status.
 
 ### Why does my custom background color not change the Badge?
 
@@ -975,18 +974,20 @@ The {Platform} Badge is commonly used with related components such as Avatar whe
 
 ## FAQ
 
-These frequently asked questions cover common {Platform} Badge content, indicator, and package choices.
-
 <Faq>
 
   <FaqItem question="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.
+    Yes. Use the Badge's content area for the text and the supported icon content for the visual indicator. Keep the combination short so it remains a compact status or category label.
   </FaqItem>
 
   <FaqItem question="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.
   </FaqItem>
 
+  <FaqItem question="When should I use a dot Badge instead of a text Badge?">
+    Use a dot Badge when the status is communicated by presence alone. Use a text Badge when users need the status, category, or count to be understandable without relying on color or position.
+  </FaqItem>
+
   <FaqItem question="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.
   </FaqItem>