diff --git a/live-editing/configs/ButtonGroupConfigGenerator.ts b/live-editing/configs/ButtonGroupConfigGenerator.ts
index f5be3f0918..9db78ec06d 100644
--- a/live-editing/configs/ButtonGroupConfigGenerator.ts
+++ b/live-editing/configs/ButtonGroupConfigGenerator.ts
@@ -10,45 +10,73 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // button group 1
+        // button group overview
         configs.push(new Config({
-            component: 'ButtonGroupSample1Component',
+            component: 'ButtonGroupOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 2
+        // button group layout
         configs.push(new Config({
-            component: 'ButtonGroupSample2Component',
+            component: 'ButtonGroupLayoutComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 3
+        // button group alignment
         configs.push(new Config({
-            component: 'ButtonGroupSample3Component',
+            component: 'ButtonGroupAlignmentComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 4
+        // button group custom toggle
         configs.push(new Config({
-            component: 'ButtonGroupSampleComponent',
+            component: 'ButtonGroupCustomToggleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 5
+        // button group states
         configs.push(new Config({
-            component: 'ButtonGroupSample5Component',
+            component: 'ButtonGroupStatesComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group style
+        // button group interaction states
         configs.push(new Config({
-            component: 'ButtonGroupStyleComponent',
-            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-style/layout.scss"],
+            component: 'ButtonGroupInteractionStatesComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group selection
+        configs.push(new Config({
+            component: 'ButtonGroupSelectionComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group size
+        configs.push(new Config({
+            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 tailwind styling
+        configs.push(new Config({
+            component: 'ButtonGroupTailwindStylingComponent',
             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
new file mode 100644
index 0000000000..4bf378781a
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html
@@ -0,0 +1,12 @@
+<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
new file mode 100644
index 0000000000..d8f1c12333
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss
@@ -0,0 +1,35 @@
+.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
new file mode 100644
index 0000000000..f531ba9cd9
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+
+@Component({
+    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 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
new file mode 100644
index 0000000000..6c27c58e2a
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html
@@ -0,0 +1,3 @@
+<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
new file mode 100644
index 0000000000..157e28c3ca
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss
@@ -0,0 +1,11 @@
+.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-sample-3/button-group-sample-3.component.ts b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts
similarity index 56%
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-custom-toggle/button-group-custom-toggle.component.ts
index 02cf6a6d75..d6038eab52 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-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,32 +32,20 @@ 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-custom-toggle',
+    styleUrls: ['./button-group-custom-toggle.component.scss'],
+    templateUrl: './button-group-custom-toggle.component.html',
     imports: [IgxButtonGroupComponent]
 })
-export class ButtonGroupSample3Component 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-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
new file mode 100644
index 0000000000..f2cee52a01
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html
@@ -0,0 +1,15 @@
+<article class="sample-column button-group-layout">
+    <igx-buttongroup>
+        @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
new file mode 100644
index 0000000000..fc95cf4014
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss
@@ -0,0 +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
new file mode 100644
index 0000000000..7a200f3a57
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.ts
@@ -0,0 +1,20 @@
+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',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
+})
+export class ButtonGroupLayoutComponent {
+    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
new file mode 100644
index 0000000000..e6f995b8d8
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html
@@ -0,0 +1,19 @@
+<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" [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
new file mode 100644
index 0000000000..128e5f6f92
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss
@@ -0,0 +1,35 @@
+.button-group-overview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+igx-buttongroup {
+    display: block;
+    width: 280px;
+    max-width: 100%;
+}
+
+.album {
+    margin-top: 8px;
+    width: 280px;
+    max-width: 100%;
+}
+
+.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
new file mode 100644
index 0000000000..0daa96866b
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.ts
@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+
+type AlbumSource = 'device' | 'cloud';
+
+@Component({
+    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 = '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-sample-1/button-group-sample-1.component.html b/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.html
deleted file mode 100644
index 854a5f1c11..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<article class="sample-column">
-    <igx-buttongroup>
-        <button igxButton [igxRipple]="rippleColor">
-            <igx-icon>format_align_left</igx-icon>
-        </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>
-    </igx-buttongroup>
-</article>
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-1/button-group-sample-1.component.ts b/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.ts
deleted file mode 100644
index f37bb9b73f..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-1/button-group-sample-1.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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-sample-1',
-    styleUrls: ['./button-group-sample-1.component.scss'],
-    templateUrl: './button-group-sample-1.component.html',
-    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
-})
-
-export class ButtonGroupSample1Component {
-    public rippleColor = 'grey';
-}
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-sample-2/button-group-sample-2.component.html
deleted file mode 100644
index 0a027f389c..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<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>
\ No newline at end of file
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-sample-2/button-group-sample-2.component.scss
deleted file mode 100644
index d252d95ade..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-igx-buttongroup{
-    display: inline-block;
-    width: 200px;
-}
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-sample-2/button-group-sample-2.component.ts
deleted file mode 100644
index 2eada571ae..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-2/button-group-sample-2.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
-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',
-    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
-})
-export class ButtonGroupSample2Component {
-    public alignment = ButtonGroupAlignment.vertical;
-    public rippleColor = 'grey';
-}
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-sample-3/button-group-sample-3.component.html
deleted file mode 100644
index bf17c25433..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<article class="sample-column">
-    <igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>
-</article>
\ No newline at end of file
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-sample-3/button-group-sample-3.component.scss
deleted file mode 100644
index 9615aaba0b..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-igx-buttongroup {
-    display: inline-block;
-    width: 300px;
-}
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-sample-4/button-group-sample.component.html
deleted file mode 100644
index 6bbc9282af..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<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>
\ No newline at end of file
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-sample-4/button-group-sample.component.scss
deleted file mode 100644
index e72ce547c6..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.sample-column,
-.radio-buttons {
-    display: flex;
-    gap: 16px;
-}
-
-.sample-column {
-    flex-direction: column;
-    align-items: flex-start;
-}
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-sample-4/button-group-sample.component.ts
deleted file mode 100644
index ae65a3887b..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-4/button-group-sample.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-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';
-
-@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]
-})
-export class ButtonGroupSampleComponent {
-    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-sample-5/button-group-sample-5.component.html
deleted file mode 100644
index baaf314768..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<article class="sample-column">
-    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
-</article>
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-sample-5/button-group-sample-5.component.scss
deleted file mode 100644
index bfd80266c3..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-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-sample-5/button-group-sample-5.component.ts
deleted file mode 100644
index d021936039..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
-import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
-
-type Button = {
-    label: string,
-    selected: boolean,
-    togglable: boolean
-}
-
-@Component({
-    selector: 'app-button-group-sample-5',
-    styleUrls: ['./button-group-sample-5.component.scss'],
-    templateUrl: './button-group-sample-5.component.html',
-    imports: [IgxButtonGroupComponent]
-})
-export class ButtonGroupSample5Component 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 }
-        ];
-    }
-
-    public selectSize(event: any) {
-        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-selection/button-group-selection.component.html b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html
new file mode 100644
index 0000000000..65ff4542c1
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html
@@ -0,0 +1,18 @@
+<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
new file mode 100644
index 0000000000..7e52239fa8
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss
@@ -0,0 +1,30 @@
+.selection-samples {
+    display: flex;
+    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
new file mode 100644
index 0000000000..f1b9c738d0
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.ts
@@ -0,0 +1,30 @@
+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 SelectionMode = 'single' | 'singleRequired' | 'multi';
+
+@Component({
+    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 = '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
new file mode 100644
index 0000000000..57418c0d59
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html
@@ -0,0 +1,16 @@
+<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
new file mode 100644
index 0000000000..7d9127e015
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss
@@ -0,0 +1,41 @@
+.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
new file mode 100644
index 0000000000..9fb454b60d
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-button-group-size',
+    styleUrls: ['./button-group-size.component.scss'],
+    templateUrl: './button-group-size.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupSizeComponent {
+    public rippleColor = 'gray';
+    public cities = ['Sofia', 'London', 'New York'];
+    public sizes = ['small', 'medium', 'large'];
+
+    public getLabel(size: string) {
+        return size.charAt(0).toUpperCase() + size.slice(1);
+    }
+
+    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..c823cd9347
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss
@@ -0,0 +1,41 @@
+.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;
+    text-align: center;
+}
+
+.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-style/button-group-style.component.html b/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.html
deleted file mode 100644
index a3d364e034..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<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>
-    </igx-buttongroup>
-</article>
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/button-group-style.component.scss
deleted file mode 100644
index a0b99d8400..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use "layout.scss" as *;
-@use "igniteui-angular/theming" as *;
-
-$custom-button-group: button-group-theme(
-  $item-background: #57a5cd,
-);
-
-:host {
-    @include tokens($custom-button-group);
-}
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 63d01e5c0a..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { ButtonGroupAlignment, 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',
-    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
-})
-export class ButtonGroupStyleComponent {
-    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/layout.scss
deleted file mode 100644
index 2f8fa57371..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-style/layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-igx-buttongroup {
-    display: inline-block;
-    width: 200px;
-}
\ No newline at end of file
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
new file mode 100644
index 0000000000..c59162f0a1
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 0000000000..4475acc9d9
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss
@@ -0,0 +1,20 @@
+@use "layout.scss" as *;
+@use "igniteui-angular/theming" as *;
+
+$custom-button-group: button-group-theme(
+    $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 {
+    @include tokens($custom-button-group);
+}
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
new file mode 100644
index 0000000000..b963986943
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { 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',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupStylingComponent {
+    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
new file mode 100644
index 0000000000..544499adef
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-styling/layout.scss
@@ -0,0 +1,13 @@
+.button-group-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 7rem;
+}
+
+igx-buttongroup {
+    width: 420px;
+    border: 2px solid #4da3e8;
+    border-radius: 4px;
+    overflow: hidden;
+}
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/button-group-tailwind-style.component.html
deleted file mode 100644
index 868c9452a4..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<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>
-    </igx-buttongroup>
-</article>
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-tailwind-style/button-group-tailwind-style.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
deleted file mode 100644
index 178214d69a..0000000000
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { ButtonGroupAlignment, 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',
-    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
-})
-export class ButtonGroupTailwindStyleComponent {
-}
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
new file mode 100644
index 0000000000..8a1bc14d88
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 0000000000..2c28a26070
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..431471a677
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { 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',
+    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 c6d537969d..5e710a28e7 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -3,13 +3,16 @@
 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-overview": { displayName: "Button Group Overview", parentName: "Button Group" },
+    "button-group-layout": { displayName: "Button Group Layout", 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-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" },
     "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..8bc329cfcc 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -1,13 +1,16 @@
 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 { 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 { 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';
+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 +102,54 @@ export const DataEntriesRoutes: Routes = [
         path: 'buttons-display-density'
     },
     {
-        component: ButtonGroupSample1Component,
-        data: dataEntriesRoutesData['button-group-sample-1'],
-        path: 'button-group-sample-1'
+        component: ButtonGroupOverviewComponent,
+        data: dataEntriesRoutesData['button-group-overview'],
+        path: 'button-group-overview'
     },
     {
-        component: ButtonGroupSample2Component,
-        data: dataEntriesRoutesData['button-group-sample-2'],
-        path: 'button-group-sample-2'
+        component: ButtonGroupLayoutComponent,
+        data: dataEntriesRoutesData['button-group-layout'],
+        path: 'button-group-layout'
     },
     {
-        component: ButtonGroupSample3Component,
-        data: dataEntriesRoutesData['button-group-sample-3'],
-        path: 'button-group-sample-3'
+        component: ButtonGroupAlignmentComponent,
+        data: dataEntriesRoutesData['button-group-alignment'],
+        path: 'button-group-alignment'
     },
     {
-        component: ButtonGroupSampleComponent,
-        data: dataEntriesRoutesData['button-group-sample-4'],
-        path: 'button-group-sample-4'
+        component: ButtonGroupCustomToggleComponent,
+        data: dataEntriesRoutesData['button-group-custom-toggle'],
+        path: 'button-group-custom-toggle'
     },
     {
-        component: ButtonGroupSample5Component,
-        data: dataEntriesRoutesData['button-group-sample-5'],
-        path: 'button-group-sample-5'
+        component: ButtonGroupStatesComponent,
+        data: dataEntriesRoutesData['button-group-states'],
+        path: 'button-group-states'
     },
     {
-        component: ButtonGroupStyleComponent,
-        data: dataEntriesRoutesData['button-group-style'],
-        path: 'button-group-style'
+        component: ButtonGroupInteractionStatesComponent,
+        data: dataEntriesRoutesData['button-group-interaction-states'],
+        path: 'button-group-interaction-states'
     },
     {
-        component: ButtonGroupTailwindStyleComponent,
-        data: dataEntriesRoutesData['button-group-tailwind-style'],
-        path: 'button-group-tailwind-style'
+        component: ButtonGroupSelectionComponent,
+        data: dataEntriesRoutesData['button-group-selection'],
+        path: 'button-group-selection'
+    },
+    {
+        component: ButtonGroupSizeComponent,
+        data: dataEntriesRoutesData['button-group-size'],
+        path: 'button-group-size'
+    },
+    {
+        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,