From 5e9fd385ba6e55da93be637437703d6e64804a04 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Mon, 27 Jul 2026 13:14:20 +0300
Subject: [PATCH 1/5] feat(button-group): update button group samples

---
 .../configs/ButtonGroupConfigGenerator.ts     | 24 ++++----
 ...ton-group-alignment-sample.component.html} |  2 +-
 ...ton-group-alignment-sample.component.scss} |  0
 ...utton-group-alignment-sample.component.ts} |  8 +--
 ...button-group-layout-sample.component.html} |  0
 ...button-group-layout-sample.component.scss} |  0
 .../button-group-layout-sample.component.ts}  |  9 ++-
 .../button-group-sample-1.component.scss      |  4 --
 ...ton-group-selection-sample.component.html} |  2 +-
 ...ton-group-selection-sample.component.scss} |  0
 ...utton-group-selection-sample.component.ts} |  8 +--
 .../button-group-size-sample.component.html}  |  0
 .../button-group-size-sample.component.scss}  |  4 +-
 .../button-group-size-sample.component.ts}    |  9 ++-
 .../button-group-style-sample.component.html} |  0
 .../button-group-style-sample.component.scss} |  0
 .../button-group-style-sample.component.ts}   |  8 +--
 .../layout.scss                               |  2 +-
 ...roup-tailwind-style-sample.component.html} |  0
 ...group-tailwind-style-sample.component.scss |  0
 ...-group-tailwind-style-sample.component.ts} |  8 +--
 ...button-group-toggle-sample.component.html} |  2 +-
 ...button-group-toggle-sample.component.scss} |  0
 .../button-group-toggle-sample.component.ts}  | 28 +++-------
 .../data-entries/data-entries-routes-data.ts  | 14 ++---
 src/app/data-entries/data-entries.routes.ts   | 56 +++++++++----------
 26 files changed, 85 insertions(+), 103 deletions(-)
 rename src/app/data-entries/buttonGroup/{button-group-sample-2/button-group-sample-2.component.html => button-group-alignment-sample/button-group-alignment-sample.component.html} (97%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-2/button-group-sample-2.component.scss => button-group-alignment-sample/button-group-alignment-sample.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-2/button-group-sample-2.component.ts => button-group-alignment-sample/button-group-alignment-sample.component.ts} (67%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-1/button-group-sample-1.component.html => button-group-layout-sample/button-group-layout-sample.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-tailwind-style/button-group-tailwind-style.component.scss => button-group-layout-sample/button-group-layout-sample.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-1/button-group-sample-1.component.ts => button-group-layout-sample/button-group-layout-sample.component.ts} (68%)
 delete mode 100644 src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.scss
 rename src/app/data-entries/buttonGroup/{button-group-sample-4/button-group-sample.component.html => button-group-selection-sample/button-group-selection-sample.component.html} (98%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-4/button-group-sample.component.scss => button-group-selection-sample/button-group-selection-sample.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-4/button-group-sample.component.ts => button-group-selection-sample/button-group-selection-sample.component.ts} (74%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-5/button-group-sample-5.component.html => button-group-size-sample/button-group-size-sample.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-5/button-group-sample-5.component.scss => button-group-size-sample/button-group-size-sample.component.scss} (57%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-5/button-group-sample-5.component.ts => button-group-size-sample/button-group-size-sample.component.ts} (80%)
 rename src/app/data-entries/buttonGroup/{button-group-style/button-group-style.component.html => button-group-style-sample/button-group-style-sample.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-style/button-group-style.component.scss => button-group-style-sample/button-group-style-sample.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-style/button-group-style.component.ts => button-group-style-sample/button-group-style-sample.component.ts} (67%)
 rename src/app/data-entries/buttonGroup/{button-group-style => button-group-style-sample}/layout.scss (96%)
 rename src/app/data-entries/buttonGroup/{button-group-tailwind-style/button-group-tailwind-style.component.html => button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.html} (100%)
 create mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.scss
 rename src/app/data-entries/buttonGroup/{button-group-tailwind-style/button-group-tailwind-style.component.ts => button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.ts} (61%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-3/button-group-sample-3.component.html => button-group-toggle-sample/button-group-toggle-sample.component.html} (91%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-3/button-group-sample-3.component.scss => button-group-toggle-sample/button-group-toggle-sample.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-sample-3/button-group-sample-3.component.ts => button-group-toggle-sample/button-group-toggle-sample.component.ts} (61%)

diff --git a/live-editing/configs/ButtonGroupConfigGenerator.ts b/live-editing/configs/ButtonGroupConfigGenerator.ts
index f5be3f0918..4b0e330e3d 100644
--- a/live-editing/configs/ButtonGroupConfigGenerator.ts
+++ b/live-editing/configs/ButtonGroupConfigGenerator.ts
@@ -10,45 +10,45 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // button group 1
+        // button group layout
         configs.push(new Config({
-            component: 'ButtonGroupSample1Component',
+            component: 'ButtonGroupLayoutSampleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 2
+        // button group alignment
         configs.push(new Config({
-            component: 'ButtonGroupSample2Component',
+            component: 'ButtonGroupAlignmentSampleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 3
+        // button group toggle
         configs.push(new Config({
-            component: 'ButtonGroupSample3Component',
+            component: 'ButtonGroupToggleSampleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 4
+        // button group selection
         configs.push(new Config({
-            component: 'ButtonGroupSampleComponent',
+            component: 'ButtonGroupSelectionSampleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 5
+        // button group size
         configs.push(new Config({
-            component: 'ButtonGroupSample5Component',
+            component: 'ButtonGroupSizeSampleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
         // button group style
         configs.push(new Config({
-            component: 'ButtonGroupStyleComponent',
-            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-style/layout.scss"],
+            component: 'ButtonGroupStyleSampleComponent',
+            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-style-sample/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.html b/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.html
similarity index 97%
rename from src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.html
rename to src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.html
index 0a027f389c..2c5594fb66 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.html
@@ -5,4 +5,4 @@
         <button igxButton selected [igxRipple]="rippleColor">New York</button>
         <button igxButton [igxRipple]="rippleColor">Tokyo</button>
     </igx-buttongroup>
-</article>
\ No newline at end of file
+</article>
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.scss
rename to src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.ts b/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.ts
similarity index 67%
rename from src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.ts
rename to src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.ts
index dc0ecf0a95..e388ed56d7 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.ts
@@ -3,13 +3,13 @@ import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-sample-2',
-    styleUrls: ['./button-group-sample-2.component.scss'],
-    templateUrl: './button-group-sample-2.component.html',
+    selector: 'app-button-group-alignment-sample',
+    styleUrls: ['./button-group-alignment-sample.component.scss'],
+    templateUrl: './button-group-alignment-sample.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
-export class ButtonGroupSample2Component {
+export class ButtonGroupAlignmentSampleComponent {
     public alignment = ButtonGroupAlignment.vertical;
     public rippleColor = 'grey';
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.html b/src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.html
rename to src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.scss b/src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.scss
rename to src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.ts b/src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.ts
similarity index 68%
rename from src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.ts
rename to src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.ts
index 1cfab30696..54d6e041f1 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.ts
@@ -4,13 +4,12 @@ import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directi
 import { IgxIconComponent } from 'igniteui-angular/icon';
 
 @Component({
-    selector: 'app-button-group-sample-1',
-    styleUrls: ['./button-group-sample-1.component.scss'],
-    templateUrl: './button-group-sample-1.component.html',
+    selector: 'app-button-group-layout-sample',
+    styleUrls: ['./button-group-layout-sample.component.scss'],
+    templateUrl: './button-group-layout-sample.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
-
-export class ButtonGroupSample1Component {
+export class ButtonGroupLayoutSampleComponent {
     public rippleColor = 'grey';
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.scss b/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.scss
deleted file mode 100644
index 2f0579e90d..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-igx-buttongroup{
-    display: inline-block;
-    max-width: 400px;
-}
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.html b/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.html
similarity index 98%
rename from src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.html
rename to src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.html
index 6bbc9282af..0141c43b7c 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.html
@@ -16,4 +16,4 @@ <h6>Selection Mode</h6>
             <igx-icon>format_underlined</igx-icon>
         </button>
     </igx-buttongroup>
-</article>
\ No newline at end of file
+</article>
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.scss
rename to src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.ts b/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.ts
similarity index 74%
rename from src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.ts
rename to src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.ts
index e27e36a6eb..f9d39297c8 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.ts
@@ -6,13 +6,13 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 import { FormsModule } from '@angular/forms';
 
 @Component({
-    selector: 'app-button-group-sample',
-    styleUrls: ['./button-group-sample.component.scss'],
-    templateUrl: './button-group-sample.component.html',
+    selector: 'app-button-group-selection-sample',
+    styleUrls: ['./button-group-selection-sample.component.scss'],
+    templateUrl: './button-group-selection-sample.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxRadioComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
-export class ButtonGroupSampleComponent {
+export class ButtonGroupSelectionSampleComponent {
     public rippleColor = 'grey';
     public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html b/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html
rename to src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.scss b/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.scss
similarity index 57%
rename from src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.scss
rename to src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.scss
index bfd80266c3..bbd666d822 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.scss
@@ -1,3 +1,3 @@
-igx-buttongroup{
+igx-buttongroup {
     display: inline-block;
-}
\ No newline at end of file
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts b/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.ts
similarity index 80%
rename from src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
rename to src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.ts
index 1caec387ba..c5e7c8b995 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.ts
@@ -8,13 +8,13 @@ type Button = {
 }
 
 @Component({
-    selector: 'app-button-group-sample-5',
-    styleUrls: ['./button-group-sample-5.component.scss'],
-    templateUrl: './button-group-sample-5.component.html',
+    selector: 'app-button-group-size-sample',
+    styleUrls: ['./button-group-size-sample.component.scss'],
+    templateUrl: './button-group-size-sample.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent]
 })
-export class ButtonGroupSample5Component implements OnInit {
+export class ButtonGroupSizeSampleComponent implements OnInit {
     public rippleColor = 'grey';
     public size = 'large';
     public sizes: Button[];
@@ -31,7 +31,6 @@ export class ButtonGroupSample5Component implements OnInit {
         this.size = this.sizes[event.index].label;
     }
 
-
     @HostBinding('style.--ig-size')
     protected get sizeStyle() {
         return `var(--ig-size-${this.size})`;
diff --git a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.html b/src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.html
rename to src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss b/src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss
rename to src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts b/src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.ts
similarity index 67%
rename from src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
rename to src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.ts
index ab7a00e512..5cbe0d693e 100644
--- a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.ts
@@ -3,12 +3,12 @@ import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-style',
-    styleUrls: ['./button-group-style.component.scss'],
-    templateUrl: './button-group-style.component.html',
+    selector: 'app-button-group-style-sample',
+    styleUrls: ['./button-group-style-sample.component.scss'],
+    templateUrl: './button-group-style-sample.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
-export class ButtonGroupStyleComponent {
+export class ButtonGroupStyleSampleComponent {
     public alignment = ButtonGroupAlignment.vertical;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-style/layout.scss b/src/app/data-entries/buttonGroup/button-group-style-sample/layout.scss
similarity index 96%
rename from src/app/data-entries/buttonGroup/button-group-style/layout.scss
rename to src/app/data-entries/buttonGroup/button-group-style-sample/layout.scss
index 2f8fa57371..90d21effb3 100644
--- a/src/app/data-entries/buttonGroup/button-group-style/layout.scss
+++ b/src/app/data-entries/buttonGroup/button-group-style-sample/layout.scss
@@ -1,4 +1,4 @@
 igx-buttongroup {
     display: inline-block;
     width: 200px;
-}
\ No newline at end of file
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
rename to src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts b/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.ts
similarity index 61%
rename from src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
rename to src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.ts
index 66f9dfd41d..975d095034 100644
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.ts
@@ -3,11 +3,11 @@ import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-tailwind-style',
-    styleUrls: ['./button-group-tailwind-style.component.scss'],
-    templateUrl: './button-group-tailwind-style.component.html',
+    selector: 'app-button-group-tailwind-style-sample',
+    styleUrls: ['./button-group-tailwind-style-sample.component.scss'],
+    templateUrl: './button-group-tailwind-style-sample.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
-export class ButtonGroupTailwindStyleComponent {
+export class ButtonGroupTailwindStyleSampleComponent {
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.html b/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.html
similarity index 91%
rename from src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.html
rename to src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.html
index bf17c25433..1bd72b5939 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.html
@@ -1,3 +1,3 @@
 <article class="sample-column">
     <igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>
-</article>
\ No newline at end of file
+</article>
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.scss b/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.scss
rename to src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.ts b/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.ts
similarity index 61%
rename from src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.ts
rename to src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.ts
index f617f1e7a7..511b5c5909 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.ts
@@ -32,33 +32,21 @@ class ToggleButton {
 }
 
 @Component({
-    selector: 'app-button-group-sample-3',
-    styleUrls: ['./button-group-sample-3.component.scss'],
-    templateUrl: './button-group-sample-3.component.html',
+    selector: 'app-button-group-toggle-sample',
+    styleUrls: ['./button-group-toggle-sample.component.scss'],
+    templateUrl: './button-group-toggle-sample.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent]
 })
-export class ButtonGroupSample3Component implements OnInit {
+export class ButtonGroupToggleSampleComponent implements OnInit {
     public bordersButtons: ToggleButton[];
 
     public ngOnInit() {
         this.bordersButtons = [
-            new ToggleButton({
-                icon: 'border_top',
-                selected: true
-            }),
-            new ToggleButton({
-                icon: 'border_right',
-                selected: false
-            }),
-            new ToggleButton({
-                icon: 'border_bottom',
-                selected: false
-            }),
-            new ToggleButton({
-                icon: 'border_left',
-                selected: false
-            })
+            new ToggleButton({ icon: 'border_top', selected: true }),
+            new ToggleButton({ icon: 'border_right', selected: false }),
+            new ToggleButton({ icon: 'border_bottom', selected: false }),
+            new ToggleButton({ icon: 'border_left', selected: false })
         ];
     }
 }
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index c6d537969d..f6ad3c80c7 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -3,13 +3,13 @@
 export const dataEntriesRoutesData = {
     "autocomplete": { displayName: "Autocomplete", parentName: "Autocomplete" },
     "movie": { displayName: "Movie Availability", parentName: "Autocomplete" },
-    "button-group-sample-1": { displayName: "Button Group Overview", parentName: "Button Group" },
-    "button-group-sample-2": { displayName: "Vertical Button Group", parentName: "Button Group" },
-    "button-group-sample-3": { displayName: "Horizontal Button Group", parentName: "Button Group" },
-    "button-group-sample-4": { displayName: "Selection Mode", parentName: "Button Group" },
-    "button-group-sample-5": { displayName: "Display Density", parentName: "Button Group" },
-    "button-group-style": { displayName: "Button Group Style", parentName: "Button Group" },
-    "button-group-tailwind-style": { displayName: "Button Group Tailwind Style", parentName: "Button Group" },
+    "button-group-layout-sample": { displayName: "Button Group Overview", parentName: "Button Group" },
+    "button-group-alignment-sample": { displayName: "Vertical Button Group", parentName: "Button Group" },
+    "button-group-toggle-sample": { displayName: "Toggle Button Group", parentName: "Button Group" },
+    "button-group-selection-sample": { displayName: "Selection Mode", parentName: "Button Group" },
+    "button-group-size-sample": { displayName: "Display Density", parentName: "Button Group" },
+    "button-group-style-sample": { displayName: "Button Group Style", parentName: "Button Group" },
+    "button-group-tailwind-style-sample": { displayName: "Button Group Tailwind Style", parentName: "Button Group" },
     "buttons-sample-1": { displayName: "Overview", parentName: "Buttons" },
     "buttons-sample-2": { displayName: "Flat Button", parentName: "Buttons" },
     "buttons-sample-3": { displayName: "Button Ripple", parentName: "Buttons" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index 665bf7c9e1..e5f24e689a 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -1,13 +1,13 @@
 import { Routes } from '@angular/router';
 import { AutocompleteBasicComponent } from './autocomplete/autocomplete/autocomplete.component';
 import { MovieComponent } from './autocomplete/movie/movie.component';
-import { ButtonGroupSample1Component } from './buttonGroup/button-group-sample-1/button-group-sample-1.component';
-import { ButtonGroupSample2Component } from './buttonGroup/button-group-sample-2/button-group-sample-2.component';
-import { ButtonGroupSample3Component } from './buttonGroup/button-group-sample-3/button-group-sample-3.component';
-import { ButtonGroupSampleComponent } from './buttonGroup/button-group-sample-4/button-group-sample.component';
-import { ButtonGroupSample5Component } from './buttonGroup/button-group-sample-5/button-group-sample-5.component';
-import { ButtonGroupStyleComponent } from './buttonGroup/button-group-style/button-group-style.component';
-import { ButtonGroupTailwindStyleComponent } from './buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component';
+import { ButtonGroupLayoutSampleComponent } from './buttonGroup/button-group-layout-sample/button-group-layout-sample.component';
+import { ButtonGroupAlignmentSampleComponent } from './buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component';
+import { ButtonGroupToggleSampleComponent } from './buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component';
+import { ButtonGroupSelectionSampleComponent } from './buttonGroup/button-group-selection-sample/button-group-selection-sample.component';
+import { ButtonGroupSizeSampleComponent } from './buttonGroup/button-group-size-sample/button-group-size-sample.component';
+import { ButtonGroupStyleSampleComponent } from './buttonGroup/button-group-style-sample/button-group-style-sample.component';
+import { ButtonGroupTailwindStyleSampleComponent } from './buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component';
 import { ButtonsDisabledComponent } from './buttons/buttons-disabled-sample/buttons-disabled-sample';
 import { ButtonsDisplayDensityComponent } from './buttons/buttons-display-density/buttons-display-density.component';
 import { ButtonsRoundnessComponent } from './buttons/buttons-roundness-sample/buttons-roundness-sample';
@@ -99,39 +99,39 @@ export const DataEntriesRoutes: Routes = [
         path: 'buttons-display-density'
     },
     {
-        component: ButtonGroupSample1Component,
-        data: dataEntriesRoutesData['button-group-sample-1'],
-        path: 'button-group-sample-1'
+        component: ButtonGroupLayoutSampleComponent,
+        data: dataEntriesRoutesData['button-group-layout-sample'],
+        path: 'button-group-layout-sample'
     },
     {
-        component: ButtonGroupSample2Component,
-        data: dataEntriesRoutesData['button-group-sample-2'],
-        path: 'button-group-sample-2'
+        component: ButtonGroupAlignmentSampleComponent,
+        data: dataEntriesRoutesData['button-group-alignment-sample'],
+        path: 'button-group-alignment-sample'
     },
     {
-        component: ButtonGroupSample3Component,
-        data: dataEntriesRoutesData['button-group-sample-3'],
-        path: 'button-group-sample-3'
+        component: ButtonGroupToggleSampleComponent,
+        data: dataEntriesRoutesData['button-group-toggle-sample'],
+        path: 'button-group-toggle-sample'
     },
     {
-        component: ButtonGroupSampleComponent,
-        data: dataEntriesRoutesData['button-group-sample-4'],
-        path: 'button-group-sample-4'
+        component: ButtonGroupSelectionSampleComponent,
+        data: dataEntriesRoutesData['button-group-selection-sample'],
+        path: 'button-group-selection-sample'
     },
     {
-        component: ButtonGroupSample5Component,
-        data: dataEntriesRoutesData['button-group-sample-5'],
-        path: 'button-group-sample-5'
+        component: ButtonGroupSizeSampleComponent,
+        data: dataEntriesRoutesData['button-group-size-sample'],
+        path: 'button-group-size-sample'
     },
     {
-        component: ButtonGroupStyleComponent,
-        data: dataEntriesRoutesData['button-group-style'],
-        path: 'button-group-style'
+        component: ButtonGroupStyleSampleComponent,
+        data: dataEntriesRoutesData['button-group-style-sample'],
+        path: 'button-group-style-sample'
     },
     {
-        component: ButtonGroupTailwindStyleComponent,
-        data: dataEntriesRoutesData['button-group-tailwind-style'],
-        path: 'button-group-tailwind-style'
+        component: ButtonGroupTailwindStyleSampleComponent,
+        data: dataEntriesRoutesData['button-group-tailwind-style-sample'],
+        path: 'button-group-tailwind-style-sample'
     },
     {
         component: ButtonsRoundnessComponent,

From d0d951b56771350f7439d93b5e01de893da71154 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Tue, 28 Jul 2026 17:55:55 +0300
Subject: [PATCH 2/5] feat(button-group): update the samples

---
 .../configs/ButtonGroupConfigGenerator.ts     | 30 ++++++---
 .../button-group-alignment.component.html}    |  0
 .../button-group-alignment.component.scss}    |  0
 .../button-group-alignment.component.ts}      |  8 +--
 .../button-group-layout.component.html        |  8 +++
 .../button-group-layout.component.scss        |  4 ++
 .../button-group-layout.component.ts          | 14 +++++
 .../button-group-overview.component.html}     |  0
 .../button-group-overview.component.scss      | 21 +++++++
 .../button-group-overview.component.ts}       |  8 +--
 .../button-group-selection.component.html}    |  0
 .../button-group-selection.component.scss}    |  0
 .../button-group-selection.component.ts}      |  8 +--
 .../button-group-size.component.html}         |  0
 .../button-group-size.component.scss}         |  0
 .../button-group-size.component.ts}           |  8 +--
 .../button-group-style.component.ts}          |  8 +--
 .../button-group-styling.component.html}      |  0
 .../button-group-styling.component.scss}      |  0
 .../button-group-styling.component.ts}        |  9 +--
 .../layout.scss                               |  0
 ...group-tailwind-style-sample.component.scss |  0
 .../button-group-tailwind-style.component.ts  | 13 ++++
 ...ton-group-tailwind-styling.component.html} |  0
 ...ton-group-tailwind-styling.component.scss} |  0
 ...button-group-tailwind-styling.component.ts | 13 ++++
 .../button-group-toggle.component.html}       |  0
 .../button-group-toggle.component.scss}       |  1 +
 .../button-group-toggle.component.ts}         |  8 +--
 .../data-entries/data-entries-routes-data.ts  | 15 ++---
 src/app/data-entries/data-entries.routes.ts   | 62 ++++++++++---------
 31 files changed, 167 insertions(+), 71 deletions(-)
 rename src/app/data-entries/buttonGroup/{button-group-alignment-sample/button-group-alignment-sample.component.html => button-group-alignment/button-group-alignment.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-alignment-sample/button-group-alignment-sample.component.scss => button-group-alignment/button-group-alignment.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-alignment-sample/button-group-alignment-sample.component.ts => button-group-alignment/button-group-alignment.component.ts} (67%)
 create mode 100644 src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html
 create mode 100644 src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss
 create mode 100644 src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts
 rename src/app/data-entries/buttonGroup/{button-group-layout-sample/button-group-layout-sample.component.html => button-group-overview/button-group-overview.component.html} (100%)
 create mode 100644 src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss
 rename src/app/data-entries/buttonGroup/{button-group-layout-sample/button-group-layout-sample.component.ts => button-group-overview/button-group-overview.component.ts} (68%)
 rename src/app/data-entries/buttonGroup/{button-group-selection-sample/button-group-selection-sample.component.html => button-group-selection/button-group-selection.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-selection-sample/button-group-selection-sample.component.scss => button-group-selection/button-group-selection.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-selection-sample/button-group-selection-sample.component.ts => button-group-selection/button-group-selection.component.ts} (74%)
 rename src/app/data-entries/buttonGroup/{button-group-size-sample/button-group-size-sample.component.html => button-group-size/button-group-size.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-toggle-sample/button-group-toggle-sample.component.scss => button-group-size/button-group-size.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-size-sample/button-group-size-sample.component.ts => button-group-size/button-group-size.component.ts} (80%)
 rename src/app/data-entries/buttonGroup/{button-group-style-sample/button-group-style-sample.component.ts => button-group-style/button-group-style.component.ts} (67%)
 rename src/app/data-entries/buttonGroup/{button-group-style-sample/button-group-style-sample.component.html => button-group-styling/button-group-styling.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-style-sample/button-group-style-sample.component.scss => button-group-styling/button-group-styling.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.ts => button-group-styling/button-group-styling.component.ts} (61%)
 rename src/app/data-entries/buttonGroup/{button-group-style-sample => button-group-styling}/layout.scss (100%)
 delete mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.scss
 create mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
 rename src/app/data-entries/buttonGroup/{button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.html => button-group-tailwind-styling/button-group-tailwind-styling.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-layout-sample/button-group-layout-sample.component.scss => button-group-tailwind-styling/button-group-tailwind-styling.component.scss} (100%)
 create mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts
 rename src/app/data-entries/buttonGroup/{button-group-toggle-sample/button-group-toggle-sample.component.html => button-group-toggle/button-group-toggle.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-size-sample/button-group-size-sample.component.scss => button-group-toggle/button-group-toggle.component.scss} (72%)
 rename src/app/data-entries/buttonGroup/{button-group-toggle-sample/button-group-toggle-sample.component.ts => button-group-toggle/button-group-toggle.component.ts} (85%)

diff --git a/live-editing/configs/ButtonGroupConfigGenerator.ts b/live-editing/configs/ButtonGroupConfigGenerator.ts
index 4b0e330e3d..e79a4c8dbf 100644
--- a/live-editing/configs/ButtonGroupConfigGenerator.ts
+++ b/live-editing/configs/ButtonGroupConfigGenerator.ts
@@ -10,45 +10,59 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
+        // button group overview
+        configs.push(new Config({
+            component: 'ButtonGroupOverviewComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
         // button group layout
         configs.push(new Config({
-            component: 'ButtonGroupLayoutSampleComponent',
+            component: 'ButtonGroupLayoutComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
         // button group alignment
         configs.push(new Config({
-            component: 'ButtonGroupAlignmentSampleComponent',
+            component: 'ButtonGroupAlignmentComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
         // button group toggle
         configs.push(new Config({
-            component: 'ButtonGroupToggleSampleComponent',
+            component: 'ButtonGroupToggleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
         // button group selection
         configs.push(new Config({
-            component: 'ButtonGroupSelectionSampleComponent',
+            component: 'ButtonGroupSelectionComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
         // button group size
         configs.push(new Config({
-            component: 'ButtonGroupSizeSampleComponent',
+            component: 'ButtonGroupSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group styling
+        configs.push(new Config({
+            component: 'ButtonGroupStylingComponent',
+            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group style
+        // button group tailwind styling
         configs.push(new Config({
-            component: 'ButtonGroupStyleSampleComponent',
-            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-style-sample/layout.scss"],
+            component: 'ButtonGroupTailwindStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
diff --git a/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.html b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.html
rename to src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.scss
rename to src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.ts b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts
similarity index 67%
rename from src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.ts
rename to src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts
index e388ed56d7..d319ed2130 100644
--- a/src/app/data-entries/buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts
@@ -3,13 +3,13 @@ import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-alignment-sample',
-    styleUrls: ['./button-group-alignment-sample.component.scss'],
-    templateUrl: './button-group-alignment-sample.component.html',
+    selector: 'app-button-group-alignment',
+    styleUrls: ['./button-group-alignment.component.scss'],
+    templateUrl: './button-group-alignment.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
-export class ButtonGroupAlignmentSampleComponent {
+export class ButtonGroupAlignmentComponent {
     public alignment = ButtonGroupAlignment.vertical;
     public rippleColor = 'grey';
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html
new file mode 100644
index 0000000000..44b6b40853
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html
@@ -0,0 +1,8 @@
+<article class="sample-column">
+    <igx-buttongroup>
+        <button igxButton [igxRipple]="rippleColor">Left</button>
+        <button igxButton [igxRipple]="rippleColor">Center</button>
+        <button igxButton [igxRipple]="rippleColor">Right</button>
+        <button igxButton [igxRipple]="rippleColor" selected>Justify</button>
+    </igx-buttongroup>
+</article>
diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss
new file mode 100644
index 0000000000..9f9384201e
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss
@@ -0,0 +1,4 @@
+igx-buttongroup {
+    display: inline-block;
+    max-width: 400px;
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts
new file mode 100644
index 0000000000..ed2d7a7365
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-button-group-layout',
+    styleUrls: ['./button-group-layout.component.scss'],
+    templateUrl: './button-group-layout.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupLayoutComponent {
+    public rippleColor = 'grey';
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.html b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.html
rename to src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss
new file mode 100644
index 0000000000..a5428d1a1b
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss
@@ -0,0 +1,21 @@
+@use "igniteui-angular/theming" as *;
+
+$overview-button-group-theme: button-group-theme(
+	$item-text-color: #000000,
+	$item-background: #2196f3,
+	$item-selected-background: #1976d2,
+	$item-selected-text-color: #000000,
+	$item-border-color: transparent,
+	$item-hover-border-color: transparent,
+	$item-active-border-color: transparent,
+	$item-focused-border-color: transparent
+);
+
+:host {
+	@include tokens($overview-button-group-theme);
+}
+
+igx-buttongroup {
+	display: inline-block;
+	max-width: 400px;
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.ts b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.ts
similarity index 68%
rename from src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.ts
rename to src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.ts
index 54d6e041f1..001bf22e76 100644
--- a/src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.ts
@@ -4,12 +4,12 @@ import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directi
 import { IgxIconComponent } from 'igniteui-angular/icon';
 
 @Component({
-    selector: 'app-button-group-layout-sample',
-    styleUrls: ['./button-group-layout-sample.component.scss'],
-    templateUrl: './button-group-layout-sample.component.html',
+    selector: 'app-button-group-overview',
+    styleUrls: ['./button-group-overview.component.scss'],
+    templateUrl: './button-group-overview.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
-export class ButtonGroupLayoutSampleComponent {
+export class ButtonGroupOverviewComponent {
     public rippleColor = 'grey';
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.html b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.html
rename to src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.scss
rename to src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.ts b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.ts
similarity index 74%
rename from src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.ts
rename to src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.ts
index f9d39297c8..7765f5f035 100644
--- a/src/app/data-entries/buttonGroup/button-group-selection-sample/button-group-selection-sample.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.ts
@@ -6,13 +6,13 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 import { FormsModule } from '@angular/forms';
 
 @Component({
-    selector: 'app-button-group-selection-sample',
-    styleUrls: ['./button-group-selection-sample.component.scss'],
-    templateUrl: './button-group-selection-sample.component.html',
+    selector: 'app-button-group-selection',
+    styleUrls: ['./button-group-selection.component.scss'],
+    templateUrl: './button-group-selection.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxRadioComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
-export class ButtonGroupSelectionSampleComponent {
+export class ButtonGroupSelectionComponent {
     public rippleColor = 'grey';
     public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.html b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.html
rename to src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.scss
rename to src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.ts b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.ts
similarity index 80%
rename from src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.ts
rename to src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.ts
index c5e7c8b995..ae2428f3c9 100644
--- a/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.ts
@@ -8,13 +8,13 @@ type Button = {
 }
 
 @Component({
-    selector: 'app-button-group-size-sample',
-    styleUrls: ['./button-group-size-sample.component.scss'],
-    templateUrl: './button-group-size-sample.component.html',
+    selector: 'app-button-group-size',
+    styleUrls: ['./button-group-size.component.scss'],
+    templateUrl: './button-group-size.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent]
 })
-export class ButtonGroupSizeSampleComponent implements OnInit {
+export class ButtonGroupSizeComponent implements OnInit {
     public rippleColor = 'grey';
     public size = 'large';
     public sizes: Button[];
diff --git a/src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.ts b/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
similarity index 67%
rename from src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.ts
rename to src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
index 5cbe0d693e..297f819374 100644
--- a/src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
@@ -3,12 +3,12 @@ import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-style-sample',
-    styleUrls: ['./button-group-style-sample.component.scss'],
-    templateUrl: './button-group-style-sample.component.html',
+    selector: 'app-button-group-styling',
+    styleUrls: ['./button-group-styling.component.scss'],
+    templateUrl: './button-group-styling.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
-export class ButtonGroupStyleSampleComponent {
+export class ButtonGroupStylingComponent {
     public alignment = ButtonGroupAlignment.vertical;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.html b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.html
rename to src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-style-sample/button-group-style-sample.component.scss
rename to src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.ts b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.ts
similarity index 61%
rename from src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.ts
rename to src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.ts
index 975d095034..297f819374 100644
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.ts
@@ -3,11 +3,12 @@ import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-tailwind-style-sample',
-    styleUrls: ['./button-group-tailwind-style-sample.component.scss'],
-    templateUrl: './button-group-tailwind-style-sample.component.html',
+    selector: 'app-button-group-styling',
+    styleUrls: ['./button-group-styling.component.scss'],
+    templateUrl: './button-group-styling.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
-export class ButtonGroupTailwindStyleSampleComponent {
+export class ButtonGroupStylingComponent {
+    public alignment = ButtonGroupAlignment.vertical;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-style-sample/layout.scss b/src/app/data-entries/buttonGroup/button-group-styling/layout.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-style-sample/layout.scss
rename to src/app/data-entries/buttonGroup/button-group-styling/layout.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
new file mode 100644
index 0000000000..5ba17a0ec8
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
@@ -0,0 +1,13 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-button-group-tailwind-styling',
+    styleUrls: ['./button-group-tailwind-styling.component.scss'],
+    templateUrl: './button-group-tailwind-styling.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupTailwindStylingComponent {
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component.html
rename to src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-layout-sample/button-group-layout-sample.component.scss
rename to src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts
new file mode 100644
index 0000000000..5ba17a0ec8
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts
@@ -0,0 +1,13 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-button-group-tailwind-styling',
+    styleUrls: ['./button-group-tailwind-styling.component.scss'],
+    templateUrl: './button-group-tailwind-styling.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupTailwindStylingComponent {
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.html b/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.html
rename to src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.scss b/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.scss
similarity index 72%
rename from src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.scss
rename to src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.scss
index bbd666d822..9615aaba0b 100644
--- a/src/app/data-entries/buttonGroup/button-group-size-sample/button-group-size-sample.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.scss
@@ -1,3 +1,4 @@
 igx-buttongroup {
     display: inline-block;
+    width: 300px;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.ts b/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.ts
similarity index 85%
rename from src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.ts
rename to src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.ts
index 511b5c5909..739749aceb 100644
--- a/src/app/data-entries/buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.ts
@@ -32,13 +32,13 @@ class ToggleButton {
 }
 
 @Component({
-    selector: 'app-button-group-toggle-sample',
-    styleUrls: ['./button-group-toggle-sample.component.scss'],
-    templateUrl: './button-group-toggle-sample.component.html',
+    selector: 'app-button-group-toggle',
+    styleUrls: ['./button-group-toggle.component.scss'],
+    templateUrl: './button-group-toggle.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent]
 })
-export class ButtonGroupToggleSampleComponent implements OnInit {
+export class ButtonGroupToggleComponent implements OnInit {
     public bordersButtons: ToggleButton[];
 
     public ngOnInit() {
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index f6ad3c80c7..dc047bf94b 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -3,13 +3,14 @@
 export const dataEntriesRoutesData = {
     "autocomplete": { displayName: "Autocomplete", parentName: "Autocomplete" },
     "movie": { displayName: "Movie Availability", parentName: "Autocomplete" },
-    "button-group-layout-sample": { displayName: "Button Group Overview", parentName: "Button Group" },
-    "button-group-alignment-sample": { displayName: "Vertical Button Group", parentName: "Button Group" },
-    "button-group-toggle-sample": { displayName: "Toggle Button Group", parentName: "Button Group" },
-    "button-group-selection-sample": { displayName: "Selection Mode", parentName: "Button Group" },
-    "button-group-size-sample": { displayName: "Display Density", parentName: "Button Group" },
-    "button-group-style-sample": { displayName: "Button Group Style", parentName: "Button Group" },
-    "button-group-tailwind-style-sample": { displayName: "Button Group Tailwind Style", parentName: "Button Group" },
+    "button-group-overview": { displayName: "Button Group Overview", parentName: "Button Group" },
+    "button-group-layout": { displayName: "Button Group Layout", parentName: "Button Group" },
+    "button-group-alignment": { displayName: "Vertical Button Group", parentName: "Button Group" },
+    "button-group-toggle": { displayName: "Toggle Button Group", parentName: "Button Group" },
+    "button-group-selection": { displayName: "Selection Mode", parentName: "Button Group" },
+    "button-group-size": { displayName: "Display Density", parentName: "Button Group" },
+    "button-group-styling": { displayName: "Button Group Styling", parentName: "Button Group" },
+    "button-group-tailwind-styling": { displayName: "Button Group Tailwind Styling", parentName: "Button Group" },
     "buttons-sample-1": { displayName: "Overview", parentName: "Buttons" },
     "buttons-sample-2": { displayName: "Flat Button", parentName: "Buttons" },
     "buttons-sample-3": { displayName: "Button Ripple", parentName: "Buttons" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index e5f24e689a..a8ac53b900 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -1,13 +1,14 @@
 import { Routes } from '@angular/router';
 import { AutocompleteBasicComponent } from './autocomplete/autocomplete/autocomplete.component';
 import { MovieComponent } from './autocomplete/movie/movie.component';
-import { ButtonGroupLayoutSampleComponent } from './buttonGroup/button-group-layout-sample/button-group-layout-sample.component';
-import { ButtonGroupAlignmentSampleComponent } from './buttonGroup/button-group-alignment-sample/button-group-alignment-sample.component';
-import { ButtonGroupToggleSampleComponent } from './buttonGroup/button-group-toggle-sample/button-group-toggle-sample.component';
-import { ButtonGroupSelectionSampleComponent } from './buttonGroup/button-group-selection-sample/button-group-selection-sample.component';
-import { ButtonGroupSizeSampleComponent } from './buttonGroup/button-group-size-sample/button-group-size-sample.component';
-import { ButtonGroupStyleSampleComponent } from './buttonGroup/button-group-style-sample/button-group-style-sample.component';
-import { ButtonGroupTailwindStyleSampleComponent } from './buttonGroup/button-group-tailwind-style-sample/button-group-tailwind-style-sample.component';
+import { ButtonGroupOverviewComponent } from './buttonGroup/button-group-overview/button-group-overview.component';
+import { ButtonGroupLayoutComponent } from './buttonGroup/button-group-layout/button-group-layout.component';
+import { ButtonGroupAlignmentComponent } from './buttonGroup/button-group-alignment/button-group-alignment.component';
+import { ButtonGroupToggleComponent } from './buttonGroup/button-group-toggle/button-group-toggle.component';
+import { ButtonGroupSelectionComponent } from './buttonGroup/button-group-selection/button-group-selection.component';
+import { ButtonGroupSizeComponent } from './buttonGroup/button-group-size/button-group-size.component';
+import { ButtonGroupStylingComponent } from './buttonGroup/button-group-styling/button-group-styling.component';
+import { ButtonGroupTailwindStylingComponent } from './buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component';
 import { ButtonsDisabledComponent } from './buttons/buttons-disabled-sample/buttons-disabled-sample';
 import { ButtonsDisplayDensityComponent } from './buttons/buttons-display-density/buttons-display-density.component';
 import { ButtonsRoundnessComponent } from './buttons/buttons-roundness-sample/buttons-roundness-sample';
@@ -99,39 +100,44 @@ export const DataEntriesRoutes: Routes = [
         path: 'buttons-display-density'
     },
     {
-        component: ButtonGroupLayoutSampleComponent,
-        data: dataEntriesRoutesData['button-group-layout-sample'],
-        path: 'button-group-layout-sample'
+        component: ButtonGroupOverviewComponent,
+        data: dataEntriesRoutesData['button-group-overview'],
+        path: 'button-group-overview'
     },
     {
-        component: ButtonGroupAlignmentSampleComponent,
-        data: dataEntriesRoutesData['button-group-alignment-sample'],
-        path: 'button-group-alignment-sample'
+        component: ButtonGroupLayoutComponent,
+        data: dataEntriesRoutesData['button-group-layout'],
+        path: 'button-group-layout'
     },
     {
-        component: ButtonGroupToggleSampleComponent,
-        data: dataEntriesRoutesData['button-group-toggle-sample'],
-        path: 'button-group-toggle-sample'
+        component: ButtonGroupAlignmentComponent,
+        data: dataEntriesRoutesData['button-group-alignment'],
+        path: 'button-group-alignment'
     },
     {
-        component: ButtonGroupSelectionSampleComponent,
-        data: dataEntriesRoutesData['button-group-selection-sample'],
-        path: 'button-group-selection-sample'
+        component: ButtonGroupToggleComponent,
+        data: dataEntriesRoutesData['button-group-toggle'],
+        path: 'button-group-toggle'
     },
     {
-        component: ButtonGroupSizeSampleComponent,
-        data: dataEntriesRoutesData['button-group-size-sample'],
-        path: 'button-group-size-sample'
+        component: ButtonGroupSelectionComponent,
+        data: dataEntriesRoutesData['button-group-selection'],
+        path: 'button-group-selection'
     },
     {
-        component: ButtonGroupStyleSampleComponent,
-        data: dataEntriesRoutesData['button-group-style-sample'],
-        path: 'button-group-style-sample'
+        component: ButtonGroupSizeComponent,
+        data: dataEntriesRoutesData['button-group-size'],
+        path: 'button-group-size'
     },
     {
-        component: ButtonGroupTailwindStyleSampleComponent,
-        data: dataEntriesRoutesData['button-group-tailwind-style-sample'],
-        path: 'button-group-tailwind-style-sample'
+        component: ButtonGroupStylingComponent,
+        data: dataEntriesRoutesData['button-group-styling'],
+        path: 'button-group-styling'
+    },
+    {
+        component: ButtonGroupTailwindStylingComponent,
+        data: dataEntriesRoutesData['button-group-tailwind-styling'],
+        path: 'button-group-tailwind-styling'
     },
     {
         component: ButtonsRoundnessComponent,

From 3985c2a63d5ef9abdcd3e9ae7df38a582dbc4dc9 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Wed, 19 Aug 2026 17:10:22 +0300
Subject: [PATCH 3/5] fix(button-group): fix names and folders

---
 ...button-group-custom-toggle.component.html} |  0
 ...button-group-custom-toggle.component.scss} |  0
 .../button-group-custom-toggle.component.ts}  | 20 +++++++++----------
 .../button-group-style.component.ts           | 14 -------------
 .../button-group-tailwind-style.component.ts  | 13 ------------
 .../data-entries/data-entries-routes-data.ts  |  2 +-
 src/app/data-entries/data-entries.routes.ts   |  8 ++++----
 7 files changed, 15 insertions(+), 42 deletions(-)
 rename src/app/data-entries/buttonGroup/{button-group-toggle/button-group-toggle.component.html => button-group-custom-toggle/button-group-custom-toggle.component.html} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-toggle/button-group-toggle.component.scss => button-group-custom-toggle/button-group-custom-toggle.component.scss} (100%)
 rename src/app/data-entries/buttonGroup/{button-group-toggle/button-group-toggle.component.ts => button-group-custom-toggle/button-group-custom-toggle.component.ts} (65%)
 delete mode 100644 src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
 delete mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts

diff --git a/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.html b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.html
rename to src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html
diff --git a/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.scss b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss
similarity index 100%
rename from src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.scss
rename to src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss
diff --git a/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.ts b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts
similarity index 65%
rename from src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.ts
rename to src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts
index 739749aceb..9dfc388d9f 100644
--- a/src/app/data-entries/buttonGroup/button-group-toggle/button-group-toggle.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts
@@ -11,7 +11,7 @@ interface IButton {
     icon?: string;
 }
 
-class ToggleButton {
+class CustomToggle {
     private ripple: string;
     private label: string;
     private disabled: boolean;
@@ -32,21 +32,21 @@ class ToggleButton {
 }
 
 @Component({
-    selector: 'app-button-group-toggle',
-    styleUrls: ['./button-group-toggle.component.scss'],
-    templateUrl: './button-group-toggle.component.html',
+    selector: 'app-button-group-custom-toggle',
+    styleUrls: ['./button-group-custom-toggle.component.scss'],
+    templateUrl: './button-group-custom-toggle.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxButtonGroupComponent]
 })
-export class ButtonGroupToggleComponent implements OnInit {
-    public bordersButtons: ToggleButton[];
+export class ButtonGroupCustomToggleComponent implements OnInit {
+    public bordersButtons: CustomToggle[];
 
     public ngOnInit() {
         this.bordersButtons = [
-            new ToggleButton({ icon: 'border_top', selected: true }),
-            new ToggleButton({ icon: 'border_right', selected: false }),
-            new ToggleButton({ icon: 'border_bottom', selected: false }),
-            new ToggleButton({ icon: 'border_left', selected: false })
+            new CustomToggle({ icon: 'border_top', selected: true }),
+            new CustomToggle({ icon: 'border_right', selected: false }),
+            new CustomToggle({ icon: 'border_bottom', selected: false }),
+            new CustomToggle({ icon: 'border_left', selected: false })
         ];
     }
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts b/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
deleted file mode 100644
index 297f819374..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
-import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-
-@Component({
-    selector: 'app-button-group-styling',
-    styleUrls: ['./button-group-styling.component.scss'],
-    templateUrl: './button-group-styling.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
-})
-export class ButtonGroupStylingComponent {
-    public alignment = ButtonGroupAlignment.vertical;
-}
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
deleted file mode 100644
index 5ba17a0ec8..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
-import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-
-@Component({
-    selector: 'app-button-group-tailwind-styling',
-    styleUrls: ['./button-group-tailwind-styling.component.scss'],
-    templateUrl: './button-group-tailwind-styling.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
-})
-export class ButtonGroupTailwindStylingComponent {
-}
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index dc047bf94b..f73ecb3e90 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -6,7 +6,7 @@ export const dataEntriesRoutesData = {
     "button-group-overview": { displayName: "Button Group Overview", parentName: "Button Group" },
     "button-group-layout": { displayName: "Button Group Layout", parentName: "Button Group" },
     "button-group-alignment": { displayName: "Vertical Button Group", parentName: "Button Group" },
-    "button-group-toggle": { displayName: "Toggle Button Group", parentName: "Button Group" },
+    "button-group-custom-toggle": { displayName: "Button Group Custom Toggle", parentName: "Button Group" },
     "button-group-selection": { displayName: "Selection Mode", parentName: "Button Group" },
     "button-group-size": { displayName: "Display Density", parentName: "Button Group" },
     "button-group-styling": { displayName: "Button Group Styling", parentName: "Button Group" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index a8ac53b900..c312abd19f 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -4,7 +4,7 @@ import { MovieComponent } from './autocomplete/movie/movie.component';
 import { ButtonGroupOverviewComponent } from './buttonGroup/button-group-overview/button-group-overview.component';
 import { ButtonGroupLayoutComponent } from './buttonGroup/button-group-layout/button-group-layout.component';
 import { ButtonGroupAlignmentComponent } from './buttonGroup/button-group-alignment/button-group-alignment.component';
-import { ButtonGroupToggleComponent } from './buttonGroup/button-group-toggle/button-group-toggle.component';
+import { ButtonGroupCustomToggleComponent } from './buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component';
 import { ButtonGroupSelectionComponent } from './buttonGroup/button-group-selection/button-group-selection.component';
 import { ButtonGroupSizeComponent } from './buttonGroup/button-group-size/button-group-size.component';
 import { ButtonGroupStylingComponent } from './buttonGroup/button-group-styling/button-group-styling.component';
@@ -115,9 +115,9 @@ export const DataEntriesRoutes: Routes = [
         path: 'button-group-alignment'
     },
     {
-        component: ButtonGroupToggleComponent,
-        data: dataEntriesRoutesData['button-group-toggle'],
-        path: 'button-group-toggle'
+        component: ButtonGroupCustomToggleComponent,
+        data: dataEntriesRoutesData['button-group-custom-toggle'],
+        path: 'button-group-custom-toggle'
     },
     {
         component: ButtonGroupSelectionComponent,

From 1427e3df0bb8d553d0ad8e42e04dcc5ba8e533a5 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Wed, 19 Aug 2026 18:45:28 +0300
Subject: [PATCH 4/5] feat(button-group): update samples content

---
 .../configs/ButtonGroupConfigGenerator.ts     | 18 ++++-
 .../badge/badge-dot/badge-dot.component.scss  |  9 ++-
 .../badge-icon/badge-icon.component.scss      | 13 +++-
 .../badge-outlined.component.scss             |  7 +-
 .../badge-shape/badge-shape.component.scss    |  9 ++-
 .../badge-size/badge-size.component.scss      |  9 ++-
 .../badge-type/badge-type.component.scss      | 10 ++-
 .../badge-variants.component.scss             |  7 +-
 .../button-group-alignment.component.html     | 18 +++--
 .../button-group-alignment.component.scss     | 37 +++++++++-
 .../button-group-alignment.component.ts       | 15 ++--
 .../button-group-custom-toggle.component.html |  4 +-
 .../button-group-custom-toggle.component.scss |  7 ++
 .../button-group-custom-toggle.component.ts   |  6 +-
 ...on-group-interaction-states.component.html | 28 +++++++
 ...on-group-interaction-states.component.scss | 73 +++++++++++++++++++
 ...tton-group-interaction-states.component.ts | 25 +++++++
 .../button-group-layout.component.html        | 17 +++--
 .../button-group-layout.component.scss        | 17 +++++
 .../button-group-layout.component.ts          | 14 +++-
 .../button-group-overview.component.html      | 27 ++++---
 .../button-group-overview.component.scss      | 46 ++++++++----
 .../button-group-overview.component.ts        | 43 +++++++++--
 .../button-group-selection.component.html     | 35 +++++----
 .../button-group-selection.component.scss     | 32 ++++++--
 .../button-group-selection.component.ts       | 29 ++++++--
 .../button-group-size.component.html          | 17 ++++-
 .../button-group-size.component.scss          | 43 ++++++++++-
 .../button-group-size.component.ts            | 42 ++++-------
 .../button-group-states.component.html        | 26 +++++++
 .../button-group-states.component.scss        | 40 ++++++++++
 .../button-group-states.component.ts          | 18 +++++
 .../button-group-styling.component.html       | 11 ++-
 .../button-group-styling.component.scss       | 12 ++-
 .../button-group-styling.component.ts         | 11 +--
 .../button-group-styling/layout.scss          | 13 +++-
 ...tton-group-tailwind-styling.component.html | 11 ++-
 ...tton-group-tailwind-styling.component.scss | 15 ++++
 ...button-group-tailwind-styling.component.ts | 10 ++-
 .../button-group-tailwind-styling/layout.scss | 16 ++++
 .../data-entries/data-entries-routes-data.ts  |  8 +-
 src/app/data-entries/data-entries.routes.ts   | 12 +++
 42 files changed, 690 insertions(+), 170 deletions(-)
 create mode 100644 src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html
 create mode 100644 src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss
 create mode 100644 src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.ts
 create mode 100644 src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html
 create mode 100644 src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss
 create mode 100644 src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.ts
 create mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss

diff --git a/live-editing/configs/ButtonGroupConfigGenerator.ts b/live-editing/configs/ButtonGroupConfigGenerator.ts
index e79a4c8dbf..9db78ec06d 100644
--- a/live-editing/configs/ButtonGroupConfigGenerator.ts
+++ b/live-editing/configs/ButtonGroupConfigGenerator.ts
@@ -31,9 +31,23 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group toggle
+        // button group custom toggle
         configs.push(new Config({
-            component: 'ButtonGroupToggleComponent',
+            component: 'ButtonGroupCustomToggleComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group states
+        configs.push(new Config({
+            component: 'ButtonGroupStatesComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group interaction states
+        configs.push(new Config({
+            component: 'ButtonGroupInteractionStatesComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
index 8cfe07c79d..ec0b144f83 100644
--- a/src/app/data-display/badge/badge-dot/badge-dot.component.scss
+++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss
@@ -115,8 +115,13 @@ igx-avatar {
     align-items: center;
     gap: 4px;
     min-width: 56px;
-    color: var(--ig-gray-700);
-    font-size: 12px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
 
 .nav-item.active {
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
index fadf787c8d..fd9db26341 100644
--- a/src/app/data-display/badge/badge-icon/badge-icon.component.scss
+++ b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
@@ -44,11 +44,20 @@ igx-avatar {
 }
 
 .badge-icon-item span {
-    color: var(--ig-gray-700);
-    font-size: 12px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
     transform: translateY(4px);
 }
 
+.badge-icon-item:last-child span {
+    white-space: nowrap;
+}
+
 .avatar-wrapper {
     position: relative;
     display: flex;
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
index 2ff5d88026..b0a0086c82 100644
--- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
+++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss
@@ -110,6 +110,11 @@ igx-avatar {
 }
 
 .step-label {
-    color: var(--ig-gray-700);
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
     font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
index 917648462a..56754daae3 100644
--- a/src/app/data-display/badge/badge-shape/badge-shape.component.scss
+++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss
@@ -17,8 +17,13 @@
 
 .row-label {
     justify-self: end;
-    color: var(--ig-gray-700);
-    font-size: 14px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
 
 .badge-small {
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss
index 59184f81f1..868040a84c 100644
--- a/src/app/data-display/badge/badge-size/badge-size.component.scss
+++ b/src/app/data-display/badge/badge-size/badge-size.component.scss
@@ -17,8 +17,13 @@
 
 .row-label {
     justify-self: end;
-    color: var(--ig-gray-700);
-    font-size: 14px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
 
 .badge-large { --ig-size: var(--ig-size-large); }
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss
index 0479de835a..ece1ac951c 100644
--- a/src/app/data-display/badge/badge-type/badge-type.component.scss
+++ b/src/app/data-display/badge/badge-type/badge-type.component.scss
@@ -38,7 +38,11 @@ igx-badge {
 }
 
 .badge-type-item span {
-    color: var(--ig-gray-700);
-    font-size: 12px;
-    line-height: 16px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
index a53f2b4484..8145cf26b6 100644
--- a/src/app/data-display/badge/badge-variants/badge-variants.component.scss
+++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss
@@ -32,8 +32,13 @@ igx-avatar {
 }
 
 .variant-item span {
-    color: var(--ig-gray-700);
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
     font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
 
 .avatar-wrapper {
diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html
index 2c5594fb66..4bf378781a 100644
--- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html
@@ -1,8 +1,12 @@
-<article class="sample-column">
-    <igx-buttongroup [alignment]="alignment">
-        <button igxButton [igxRipple]="rippleColor">Sofia</button>
-        <button igxButton [igxRipple]="rippleColor">London</button>
-        <button igxButton selected [igxRipple]="rippleColor">New York</button>
-        <button igxButton [igxRipple]="rippleColor">Tokyo</button>
-    </igx-buttongroup>
+<article class="button-group-alignment">
+    @for (alignment of alignments; track alignment.value) {
+        <div class="button-group-alignment-item">
+            <span>{{ alignment.label }}</span>
+            <igx-buttongroup [alignment]="alignment.value">
+                @for (city of cities; track city) {
+                    <button igxButton [igxRipple]="rippleColor">{{ city }}</button>
+                }
+            </igx-buttongroup>
+        </div>
+    }
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss
index d252d95ade..d8f1c12333 100644
--- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss
@@ -1,4 +1,35 @@
-igx-buttongroup{
-    display: inline-block;
-    width: 200px;
+.button-group-alignment {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 60px;
+    padding: 24px;
+}
+
+.button-group-alignment-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 16px;
+}
+
+.button-group-alignment-item igx-buttongroup {
+    width: 240px;
+}
+
+.button-group-alignment-item:first-child igx-buttongroup {
+    width: 320px;
+}
+
+.button-group-alignment-item span {
+    width: 100%;
+    text-align: center;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts
index b9cbb16f84..f531ba9cd9 100644
--- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts
@@ -3,12 +3,17 @@ import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-sample-2',
-    styleUrls: ['./button-group-sample-2.component.scss'],
-    templateUrl: './button-group-sample-2.component.html',
+    selector: 'app-button-group-alignment',
+    styleUrls: ['./button-group-alignment.component.scss'],
+    templateUrl: './button-group-alignment.component.html',
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
 export class ButtonGroupAlignmentComponent {
-    public alignment = ButtonGroupAlignment.vertical;
-    public rippleColor = 'grey';
+    public rippleColor = 'gray';
+    public cities = ['Sofia', 'London', 'New York'];
+
+    public alignments: { label: string; value: ButtonGroupAlignment }[] = [
+        { label: 'Horizontal', value: ButtonGroupAlignment.horizontal },
+        { label: 'Vertical', value: ButtonGroupAlignment.vertical }
+    ];
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html
index 1bd72b5939..6c27c58e2a 100644
--- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html
@@ -1,3 +1,3 @@
-<article class="sample-column">
-    <igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>
+<article class="button-group-custom-toggle">
+    <igx-buttongroup selectionMode="multi" [values]="bordersButtons"></igx-buttongroup>
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss
index 9615aaba0b..157e28c3ca 100644
--- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss
@@ -1,3 +1,10 @@
+.button-group-custom-toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 7rem;
+}
+
 igx-buttongroup {
     display: inline-block;
     width: 300px;
diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts
index 310cdc5626..d6038eab52 100644
--- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts
@@ -32,9 +32,9 @@ class CustomToggle {
 }
 
 @Component({
-    selector: 'app-button-group-sample-3',
-    styleUrls: ['./button-group-sample-3.component.scss'],
-    templateUrl: './button-group-sample-3.component.html',
+    selector: 'app-button-group-custom-toggle',
+    styleUrls: ['./button-group-custom-toggle.component.scss'],
+    templateUrl: './button-group-custom-toggle.component.html',
     imports: [IgxButtonGroupComponent]
 })
 export class ButtonGroupCustomToggleComponent implements OnInit {
diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html
new file mode 100644
index 0000000000..49b20d26bf
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html
@@ -0,0 +1,28 @@
+<article class="button-group-interaction-states">
+    <div class="button-group-interaction-states-row">
+        <span class="row-label"></span>
+        @for (state of states; track state) {
+            <span class="column-label">{{ getLabel(state) }}</span>
+        }
+    </div>
+
+    @for (row of rows; track row.label) {
+        <div class="button-group-interaction-states-row">
+            <span class="row-label">{{ row.label }}</span>
+            @for (state of states; track state) {
+                <igx-buttongroup>
+                    <button
+                        igxButton
+                        [igxRipple]="rippleColor"
+                        [selected]="row.selected"
+                        [class]="'state-' + state"
+                        [class.state-selected]="row.selected">
+                        <igx-icon>notifications</igx-icon>
+                        Button
+                        <igx-icon>notifications</igx-icon>
+                    </button>
+                </igx-buttongroup>
+            }
+        </div>
+    }
+</article>
diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss
new file mode 100644
index 0000000000..c78233443a
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss
@@ -0,0 +1,73 @@
+.button-group-interaction-states {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 20px;
+    padding: 20px;
+}
+
+.button-group-interaction-states-row {
+    display: grid;
+    grid-template-columns: 120px 164px 164px 164px;
+    align-items: center;
+    gap: 16px;
+}
+
+.button-group-interaction-states .row-label,
+.button-group-interaction-states .column-label {
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+}
+
+.button-group-interaction-states .column-label {
+    text-align: center;
+}
+
+.button-group-interaction-states igx-buttongroup {
+    width: 164px;
+}
+
+.button-group-interaction-states button {
+    width: 100%;
+    gap: 4px;
+}
+
+.button-group-interaction-states igx-icon {
+    --ig-icon-size: 16px;
+}
+
+.button-group-interaction-states button.state-hover:not(.state-selected) {
+    background: var(--item-hover-background);
+    border-color: var(--item-hover-border-color);
+    color: var(--item-hover-text-color);
+}
+
+.button-group-interaction-states button.state-idle.state-selected {
+    background: var(--item-active-background);
+    border-color: var(--item-active-border-color);
+    color: var(--item-active-text-color);
+}
+
+.button-group-interaction-states button.state-focused:not(.state-selected) {
+    background: var(--item-focused-hover-background);
+    border-color: var(--item-focused-hover-border-color);
+    color: var(--item-focused-hover-text-color);
+}
+
+.button-group-interaction-states button.state-hover.state-selected {
+    background: var(--item-selected-active-background);
+    border-color: var(--item-selected-active-border-color);
+    color: var(--item-selected-hover-text-color);
+}
+
+.button-group-interaction-states button.state-focused.state-selected {
+    background: var(--item-selected-active-background);
+    border-color: var(--item-selected-active-border-color);
+    color: var(--item-focused-hover-text-color);
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.ts b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.ts
new file mode 100644
index 0000000000..6801887289
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-button-group-interaction-states',
+    styleUrls: ['./button-group-interaction-states.component.scss'],
+    templateUrl: './button-group-interaction-states.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
+})
+export class ButtonGroupInteractionStatesComponent {
+    public rippleColor = 'gray';
+
+    public rows: { label: string; selected: boolean }[] = [
+        { label: 'Selected / Off', selected: false },
+        { label: 'Selected / On', selected: true }
+    ];
+
+    public states = ['idle', 'hover', 'focused'];
+
+    public getLabel(state: string) {
+        return state.charAt(0).toUpperCase() + state.slice(1);
+    }
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html
index 44b6b40853..f2cee52a01 100644
--- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html
@@ -1,8 +1,15 @@
-<article class="sample-column">
+<article class="sample-column button-group-layout">
     <igx-buttongroup>
-        <button igxButton [igxRipple]="rippleColor">Left</button>
-        <button igxButton [igxRipple]="rippleColor">Center</button>
-        <button igxButton [igxRipple]="rippleColor">Right</button>
-        <button igxButton [igxRipple]="rippleColor" selected>Justify</button>
+        @for (layout of layouts; track layout.value) {
+            <button igxButton [igxRipple]="rippleColor">{{ layout.label }}</button>
+        }
+    </igx-buttongroup>
+
+    <igx-buttongroup>
+        @for (layout of layouts; track layout.value) {
+            <button igxButton [igxRipple]="rippleColor">
+                <igx-icon>{{ layout.icon }}</igx-icon>
+            </button>
+        }
     </igx-buttongroup>
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss
index 9f9384201e..fc95cf4014 100644
--- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss
@@ -1,4 +1,21 @@
+.button-group-layout {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+    min-height: 5.5rem;
+}
+
 igx-buttongroup {
     display: inline-block;
     max-width: 400px;
 }
+
+.button-group-layout button {
+    min-width: 100px;
+}
+
+.button-group-layout igx-icon {
+    --ig-icon-size: 20px;
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts
index ed2d7a7365..7a200f3a57 100644
--- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts
@@ -1,14 +1,20 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 
 @Component({
     selector: 'app-button-group-layout',
     styleUrls: ['./button-group-layout.component.scss'],
     templateUrl: './button-group-layout.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
 export class ButtonGroupLayoutComponent {
-    public rippleColor = 'grey';
+    public rippleColor = 'gray';
+
+    public layouts = [
+        { value: 'left', label: 'Left', icon: 'format_align_left' },
+        { value: 'center', label: 'Center', icon: 'format_align_center' },
+        { value: 'right', label: 'Right', icon: 'format_align_right' }
+    ];
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html
index 854a5f1c11..e6f995b8d8 100644
--- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html
@@ -1,16 +1,19 @@
-<article class="sample-column">
-    <igx-buttongroup>
-        <button igxButton [igxRipple]="rippleColor">
-            <igx-icon>format_align_left</igx-icon>
+<article class="sample-column button-group-overview">
+    <igx-buttongroup selectionMode="singleRequired">
+        <button igxButton [igxRipple]="rippleColor" [selected]="source === 'device'" (click)="selectSource('device')">
+            Device
         </button>
-        <button igxButton [igxRipple]="rippleColor">
-            <igx-icon>format_align_center</igx-icon>
-        </button>
-        <button igxButton [igxRipple]="rippleColor">
-            <igx-icon>format_align_right</igx-icon>
-        </button>
-        <button igxButton [igxRipple]="rippleColor" selected>
-            <igx-icon>format_align_justify</igx-icon>
+        <button igxButton [igxRipple]="rippleColor" [selected]="source === 'cloud'" (click)="selectSource('cloud')">
+            Cloud
         </button>
     </igx-buttongroup>
+
+    <div class="album">
+        <span class="album-title">{{ album.title }}</span>
+        <div class="album-photos">
+            @for (photo of album.photos; track photo) {
+                <img [src]="photo" [alt]="album.title" />
+            }
+        </div>
+    </div>
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss
index a5428d1a1b..128e5f6f92 100644
--- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss
@@ -1,21 +1,35 @@
-@use "igniteui-angular/theming" as *;
+.button-group-overview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 
-$overview-button-group-theme: button-group-theme(
-	$item-text-color: #000000,
-	$item-background: #2196f3,
-	$item-selected-background: #1976d2,
-	$item-selected-text-color: #000000,
-	$item-border-color: transparent,
-	$item-hover-border-color: transparent,
-	$item-active-border-color: transparent,
-	$item-focused-border-color: transparent
-);
+igx-buttongroup {
+    display: block;
+    width: 280px;
+    max-width: 100%;
+}
 
-:host {
-	@include tokens($overview-button-group-theme);
+.album {
+    margin-top: 8px;
+    width: 280px;
+    max-width: 100%;
 }
 
-igx-buttongroup {
-	display: inline-block;
-	max-width: 400px;
+.album-title {
+    display: inline-block;
+    margin-bottom: 8px;
+    color: #1f89d4;
+}
+
+.album-photos {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4px;
+}
+
+.album-photos img {
+    width: 100%;
+    object-fit: cover;
+    display: block;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.ts b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.ts
index effe4235f6..0daa96866b 100644
--- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.ts
@@ -1,14 +1,45 @@
 import { Component } from '@angular/core';
 import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxIconComponent } from 'igniteui-angular/icon';
+
+type AlbumSource = 'device' | 'cloud';
 
 @Component({
-    selector: 'app-button-group-sample-1',
-    styleUrls: ['./button-group-sample-1.component.scss'],
-    templateUrl: './button-group-sample-1.component.html',
-    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
+    selector: 'app-button-group-overview',
+    styleUrls: ['./button-group-overview.component.scss'],
+    templateUrl: './button-group-overview.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
 export class ButtonGroupOverviewComponent {
-    public rippleColor = 'grey';
+    public rippleColor = 'gray';
+    public source: AlbumSource = 'cloud';
+
+    public albums: Record<AlbumSource, { title: string; photos: string[] }> = {
+        device: {
+            title: 'Trip around the world',
+            photos: [
+                'https://picsum.photos/id/1015/300/220',
+                'https://picsum.photos/id/1016/300/220',
+                'https://picsum.photos/id/1018/300/220',
+                'https://picsum.photos/id/1019/300/220'
+            ]
+        },
+        cloud: {
+            title: 'Trip around the world',
+            photos: [
+                'https://picsum.photos/id/1036/300/220',
+                'https://picsum.photos/id/1051/300/220',
+                'https://picsum.photos/id/1062/300/220',
+                'https://picsum.photos/id/1067/300/220'
+            ]
+        }
+    };
+
+    public get album() {
+        return this.albums[this.source];
+    }
+
+    public selectSource(source: AlbumSource) {
+        this.source = source;
+    }
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html
index 0141c43b7c..65ff4542c1 100644
--- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html
@@ -1,19 +1,18 @@
-<article class="sample-column">
-    <h6>Selection Mode</h6>
-    <div class="radio-buttons">
-        <igx-radio [(ngModel)]="selectionMode" value="single">Single</igx-radio>
-        <igx-radio [(ngModel)]="selectionMode" value="singleRequired">Single-Required</igx-radio>
-        <igx-radio [(ngModel)]="selectionMode" value="multi">Multi</igx-radio>
-    </div>
-    <igx-buttongroup [selectionMode]="selectionMode">
-        <button igxButton [igxRipple]="rippleColor">
-            <igx-icon>format_bold</igx-icon>
-        </button>
-        <button igxButton [igxRipple]="rippleColor">
-            <igx-icon>format_italic</igx-icon>
-        </button>
-        <button igxButton [igxRipple]="rippleColor">
-            <igx-icon>format_underlined</igx-icon>
-        </button>
-    </igx-buttongroup>
+<article class="selection-samples">
+    @for (mode of selectionModes; track mode.value) {
+        <div class="selection-sample">
+            <span>{{ mode.label }}</span>
+            <igx-buttongroup [selectionMode]="mode.value">
+                <button igxButton [igxRipple]="rippleColor" [selected]="isBoldSelected(mode.value)">
+                    <igx-icon>format_bold</igx-icon>
+                </button>
+                <button igxButton [igxRipple]="rippleColor" [selected]="isItalicSelected(mode.value)">
+                    <igx-icon>format_italic</igx-icon>
+                </button>
+                <button igxButton [igxRipple]="rippleColor">
+                    <igx-icon>format_underlined</igx-icon>
+                </button>
+            </igx-buttongroup>
+        </div>
+    }
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss
index e72ce547c6..7e52239fa8 100644
--- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss
@@ -1,10 +1,30 @@
-.sample-column,
-.radio-buttons {
+.selection-samples {
     display: flex;
-    gap: 16px;
-}
-
-.sample-column {
+    justify-content: center;
     flex-direction: column;
     align-items: flex-start;
+    gap: 35px;
+    padding-left: 48px;
+}
+
+.selection-sample {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+}
+
+.selection-sample > span {
+    width: 120px;
+    text-align: right;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+}
+
+.selection-sample igx-buttongroup {
+    width: 200px;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.ts b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.ts
index c6c6b1e14e..f1b9c738d0 100644
--- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.ts
@@ -1,17 +1,30 @@
 import { Component } from '@angular/core';
-import { IgxRadioComponent } from 'igniteui-angular/radio';
 import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
-import { FormsModule } from '@angular/forms';
+
+type SelectionMode = 'single' | 'singleRequired' | 'multi';
 
 @Component({
-    selector: 'app-button-group-sample',
-    styleUrls: ['./button-group-sample.component.scss'],
-    templateUrl: './button-group-sample.component.html',
-    imports: [IgxRadioComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
+    selector: 'app-button-group-selection',
+    styleUrls: ['./button-group-selection.component.scss'],
+    templateUrl: './button-group-selection.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
 export class ButtonGroupSelectionComponent {
-    public rippleColor = 'grey';
-    public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
+    public rippleColor = 'gray';
+
+    public selectionModes: { label: string; value: SelectionMode }[] = [
+        { label: 'Single', value: 'single' },
+        { label: 'Single-Required', value: 'singleRequired' },
+        { label: 'Multi', value: 'multi' }
+    ];
+
+    public isBoldSelected(mode: SelectionMode) {
+        return mode === 'singleRequired' || mode === 'multi';
+    }
+
+    public isItalicSelected(mode: SelectionMode) {
+        return mode === 'multi';
+    }
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html
index baaf314768..57418c0d59 100644
--- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html
@@ -1,3 +1,16 @@
-<article class="sample-column">
-    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
+<article class="button-group-size">
+    @for (size of sizes; track size) {
+        <div class="button-group-size-item">
+            <span>{{ getLabel(size) }}</span>
+            <igx-buttongroup
+                [class.button-group-small]="size === 'small'"
+                [class.button-group-medium]="size === 'medium'"
+                [class.button-group-large]="size === 'large'"
+                [style.--ig-size]="getSizeStyle(size)">
+                @for (city of cities; track city) {
+                    <button igxButton [igxRipple]="rippleColor">{{ city }}</button>
+                }
+            </igx-buttongroup>
+        </div>
+    }
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss
index 9615aaba0b..7d9127e015 100644
--- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss
@@ -1,4 +1,41 @@
-igx-buttongroup {
-    display: inline-block;
-    width: 300px;
+.button-group-size {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 32px;
+    padding: 13px;
+    padding-left: 3rem;
+}
+
+.button-group-size-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 32px;
+}
+
+.button-group-size-item span {
+    width: 52px;
+    text-align: right;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+}
+
+.button-group-small button {
+    min-width: 90px;
+}
+
+.button-group-medium button {
+    min-width: 100px;
+}
+
+.button-group-large button {
+    min-width: 110px;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.ts b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.ts
index 1c839f54d9..9fb454b60d 100644
--- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.ts
@@ -1,37 +1,23 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
-
-type Button = {
-    label: string,
-    selected: boolean,
-    togglable: boolean
-}
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-sample-5',
-    styleUrls: ['./button-group-sample-5.component.scss'],
-    templateUrl: './button-group-sample-5.component.html',
-    imports: [IgxButtonGroupComponent]
+    selector: 'app-button-group-size',
+    styleUrls: ['./button-group-size.component.scss'],
+    templateUrl: './button-group-size.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
-export class ButtonGroupSizeComponent implements OnInit {
-    public rippleColor = 'grey';
-    public size = 'large';
-    public sizes: Button[];
-
-    public ngOnInit() {
-        this.sizes = [
-            { label: 'small', selected: this.size === 'small', togglable: true },
-            { label: 'medium', selected: this.size === 'medium', togglable: true },
-            { label: 'large', selected: this.size === 'large', togglable: true }
-        ];
-    }
+export class ButtonGroupSizeComponent {
+    public rippleColor = 'gray';
+    public cities = ['Sofia', 'London', 'New York'];
+    public sizes = ['small', 'medium', 'large'];
 
-    public selectSize(event: any) {
-        this.size = this.sizes[event.index].label;
+    public getLabel(size: string) {
+        return size.charAt(0).toUpperCase() + size.slice(1);
     }
 
-    @HostBinding('style.--ig-size')
-    protected get sizeStyle() {
-        return `var(--ig-size-${this.size})`;
+    public getSizeStyle(size: string) {
+        return `var(--ig-size-${size})`;
     }
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html
new file mode 100644
index 0000000000..81234c33df
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html
@@ -0,0 +1,26 @@
+<article class="button-group-states">
+    <div class="button-group-states-row">
+        <span class="row-label"></span>
+        <span class="column-label">Enabled</span>
+        <span class="column-label">Disabled</span>
+    </div>
+
+    @for (row of rows; track row.label) {
+        <div class="button-group-states-row">
+            <span class="row-label">{{ row.label }}</span>
+
+            <igx-buttongroup selectionMode="multi">
+                <button
+                    igxButton
+                    [igxRipple]="rippleColor"
+                    [selected]="row.selected"
+                    class="state-idle"
+                    [class.state-selected]="row.selected">Device</button>
+            </igx-buttongroup>
+
+            <igx-buttongroup selectionMode="multi" [disabled]="true">
+                <button igxButton [selected]="row.selected">Cloud</button>
+            </igx-buttongroup>
+        </div>
+    }
+</article>
diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss
new file mode 100644
index 0000000000..1d5bf6e192
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss
@@ -0,0 +1,40 @@
+.button-group-states {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 20px;
+    padding: 20px;
+}
+
+.button-group-states-row {
+    display: grid;
+    grid-template-columns: 120px 160px 160px;
+    align-items: center;
+    gap: 16px;
+}
+
+.button-group-states .row-label,
+.button-group-states .column-label {
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+}
+
+.button-group-states igx-buttongroup {
+    width: 160px;
+}
+
+.button-group-states button {
+    width: 100%;
+}
+
+.button-group-states button.state-idle.state-selected {
+    background: var(--item-active-background);
+    border-color: var(--item-active-border-color);
+    color: var(--item-active-text-color);
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.ts b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.ts
new file mode 100644
index 0000000000..993fefe7e0
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-button-group-states',
+    styleUrls: ['./button-group-states.component.scss'],
+    templateUrl: './button-group-states.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupStatesComponent {
+    public rippleColor = 'gray';
+
+    public rows: { label: string; selected: boolean }[] = [
+        { label: 'Selected / Off', selected: false },
+        { label: 'Selected / On', selected: true }
+    ];
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html
index a3d364e034..c59162f0a1 100644
--- a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html
@@ -1,8 +1,7 @@
-<article class="sample-column">
-    <igx-buttongroup [alignment]="alignment">
-        <button igxButton igxRipple="white">Sofia</button>
-        <button igxButton igxRipple="white">London</button>
-        <button igxButton igxRipple="white">New York</button>
-        <button igxButton igxRipple="white" disabled>Tokyo</button>
+<article class="button-group-styling">
+    <igx-buttongroup>
+        @for (layout of layouts; track layout) {
+            <button igxButton [igxRipple]="rippleColor" [selected]="layout === 'Left'">{{ layout }}</button>
+        }
     </igx-buttongroup>
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss
index a0b99d8400..4475acc9d9 100644
--- a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss
@@ -2,7 +2,17 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-button-group: button-group-theme(
-  $item-background: #57a5cd,
+    $item-text-color: #4a5a66,
+    $item-background: #cfe8fb,
+    $item-border-color: #4da3e8,
+    $item-hover-text-color: #4a5a66,
+    $item-hover-background: #b3daf8,
+    $item-hover-border-color: #4da3e8,
+    $item-selected-text-color: #2f4d6a,
+    $item-selected-background: #6db3ea,
+    $item-selected-border-color: #4da3e8,
+    $item-selected-hover-text-color: #2f4d6a,
+    $item-selected-hover-background: #6db3ea
 );
 
 :host {
diff --git a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.ts b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.ts
index 863f968c79..b963986943 100644
--- a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.ts
@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
-import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-style',
-    styleUrls: ['./button-group-style.component.scss'],
-    templateUrl: './button-group-style.component.html',
+    selector: 'app-button-group-styling',
+    styleUrls: ['./button-group-styling.component.scss'],
+    templateUrl: './button-group-styling.component.html',
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
 export class ButtonGroupStylingComponent {
-    public alignment = ButtonGroupAlignment.vertical;
+    public rippleColor = 'gray';
+    public layouts = ['Left', 'Center', 'Right'];
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-styling/layout.scss b/src/app/data-entries/buttonGroup/button-group-styling/layout.scss
index 90d21effb3..544499adef 100644
--- a/src/app/data-entries/buttonGroup/button-group-styling/layout.scss
+++ b/src/app/data-entries/buttonGroup/button-group-styling/layout.scss
@@ -1,4 +1,13 @@
+.button-group-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 7rem;
+}
+
 igx-buttongroup {
-    display: inline-block;
-    width: 200px;
+    width: 420px;
+    border: 2px solid #4da3e8;
+    border-radius: 4px;
+    overflow: hidden;
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html
index 868c9452a4..8a1bc14d88 100644
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html
@@ -1,8 +1,7 @@
-<article class="sample-column">
-    <igx-buttongroup class="!light-button-group ![--item-background:#7B9E89]">
-        <button igxButton igxRipple="white">Sofia</button>
-        <button igxButton igxRipple="white">London</button>
-        <button igxButton igxRipple="white">New York</button>
-        <button igxButton igxRipple="white" disabled>Tokyo</button>
+<article class="button-group-tailwind-styling box-border h-full min-h-28 w-full bg-violet-50 p-6">
+    <igx-buttongroup class="button-group-style w-[420px] overflow-hidden">
+        @for (view of views; track view) {
+            <button igxButton [igxRipple]="rippleColor" [selected]="view === 'Week'">{{ view }}</button>
+        }
     </igx-buttongroup>
 </article>
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss
index e69de29bb2..2c28a26070 100644
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss
@@ -0,0 +1,15 @@
+@use "layout.scss";
+
+.button-group-style {
+    --item-text-color: #6d28d9;
+    --item-background: #ffffff;
+    --item-border-color: #c4b5fd;
+    --item-hover-text-color: #6d28d9;
+    --item-hover-background: #fae8ff;
+    --item-hover-border-color: #c4b5fd;
+    --item-selected-text-color: #ffffff;
+    --item-selected-background: #7c3aed;
+    --item-selected-border-color: #c4b5fd;
+    --item-selected-hover-text-color: #ffffff;
+    --item-selected-hover-background: #7c3aed;
+}
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts
index 5b1a302f55..431471a677 100644
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
-import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
 @Component({
-    selector: 'app-button-group-tailwind-style',
-    styleUrls: ['./button-group-tailwind-style.component.scss'],
-    templateUrl: './button-group-tailwind-style.component.html',
+    selector: 'app-button-group-tailwind-styling',
+    styleUrls: ['./button-group-tailwind-styling.component.scss'],
+    templateUrl: './button-group-tailwind-styling.component.html',
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
 })
 export class ButtonGroupTailwindStylingComponent {
+    public rippleColor = 'gray';
+    public views = ['Day', 'Week', 'Month'];
 }
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..4b18df3f16
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss
@@ -0,0 +1,16 @@
+.button-group-tailwind-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 7rem;
+    width: 100%;
+    padding: 1.5rem;
+    box-sizing: border-box;
+    background: #f5f3ff;
+}
+
+.button-group-tailwind-styling igx-buttongroup {
+    width: 420px;
+    max-width: 100%;
+    overflow: hidden;
+}
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index f73ecb3e90..5e710a28e7 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -5,10 +5,12 @@ export const dataEntriesRoutesData = {
     "movie": { displayName: "Movie Availability", parentName: "Autocomplete" },
     "button-group-overview": { displayName: "Button Group Overview", parentName: "Button Group" },
     "button-group-layout": { displayName: "Button Group Layout", parentName: "Button Group" },
-    "button-group-alignment": { displayName: "Vertical Button Group", parentName: "Button Group" },
+    "button-group-alignment": { displayName: "Button Group Alignment", parentName: "Button Group" },
     "button-group-custom-toggle": { displayName: "Button Group Custom Toggle", parentName: "Button Group" },
-    "button-group-selection": { displayName: "Selection Mode", parentName: "Button Group" },
-    "button-group-size": { displayName: "Display Density", parentName: "Button Group" },
+    "button-group-states": { displayName: "Button Group States", parentName: "Button Group" },
+    "button-group-interaction-states": { displayName: "Button Group Interaction States", parentName: "Button Group" },
+    "button-group-selection": { displayName: "Button Group Selection", parentName: "Button Group" },
+    "button-group-size": { displayName: "Button Group Size", parentName: "Button Group" },
     "button-group-styling": { displayName: "Button Group Styling", parentName: "Button Group" },
     "button-group-tailwind-styling": { displayName: "Button Group Tailwind Styling", parentName: "Button Group" },
     "buttons-sample-1": { displayName: "Overview", parentName: "Buttons" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index c312abd19f..8bc329cfcc 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -5,6 +5,8 @@ import { ButtonGroupOverviewComponent } from './buttonGroup/button-group-overvie
 import { ButtonGroupLayoutComponent } from './buttonGroup/button-group-layout/button-group-layout.component';
 import { ButtonGroupAlignmentComponent } from './buttonGroup/button-group-alignment/button-group-alignment.component';
 import { ButtonGroupCustomToggleComponent } from './buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component';
+import { ButtonGroupStatesComponent } from './buttonGroup/button-group-states/button-group-states.component';
+import { ButtonGroupInteractionStatesComponent } from './buttonGroup/button-group-interaction-states/button-group-interaction-states.component';
 import { ButtonGroupSelectionComponent } from './buttonGroup/button-group-selection/button-group-selection.component';
 import { ButtonGroupSizeComponent } from './buttonGroup/button-group-size/button-group-size.component';
 import { ButtonGroupStylingComponent } from './buttonGroup/button-group-styling/button-group-styling.component';
@@ -119,6 +121,16 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['button-group-custom-toggle'],
         path: 'button-group-custom-toggle'
     },
+    {
+        component: ButtonGroupStatesComponent,
+        data: dataEntriesRoutesData['button-group-states'],
+        path: 'button-group-states'
+    },
+    {
+        component: ButtonGroupInteractionStatesComponent,
+        data: dataEntriesRoutesData['button-group-interaction-states'],
+        path: 'button-group-interaction-states'
+    },
     {
         component: ButtonGroupSelectionComponent,
         data: dataEntriesRoutesData['button-group-selection'],

From 8cf8b07d478e8c19df3bb9bd4b9a726e6a5d08c1 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Thu, 20 Aug 2026 10:44:12 +0300
Subject: [PATCH 5/5] fix(button-group): center states labels

---
 .../button-group-states/button-group-states.component.scss       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss
index 1d5bf6e192..c823cd9347 100644
--- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss
+++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss
@@ -23,6 +23,7 @@
     font-style: normal;
     line-height: 20px;
     letter-spacing: 0.3px;
+    text-align: center;
 }
 
 .button-group-states igx-buttongroup {