diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index c9857721a74eb..92f927d4f858e 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -361,6 +361,15 @@ export const ROUTES: Routes = [
title: 'ButtonClose',
},
},
+ {
+ path: 'experimental/button-group',
+ loadChildren: async () =>
+ (await import('../experimental/button-group/button-group.module'))
+ .ExampleTuiButtonGroupModule,
+ data: {
+ title: 'ButtonGroup',
+ },
+ },
{
path: 'experimental/cell',
loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 0d6fd8f86cd97..766ec73c11f10 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -916,6 +916,12 @@ export const pages: TuiDocPages = [
keywords: 'кнопка, button, close, закрыть',
route: '/experimental/button-close',
},
+ {
+ section: 'Experimental',
+ title: 'ButtonGroup',
+ keywords: 'кнопка, button, group, группа',
+ route: '/experimental/button-group',
+ },
],
},
{
diff --git a/projects/demo/src/modules/experimental/button-group/button-group.component.ts b/projects/demo/src/modules/experimental/button-group/button-group.component.ts
new file mode 100644
index 0000000000000..e58f4cbd151cd
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/button-group.component.ts
@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+ selector: 'example-button-group-card',
+ templateUrl: './button-group.template.html',
+ changeDetection,
+})
+export class ExampleTuiButtonGroupComponent {
+ readonly exampleModule: TuiRawLoaderContent = import(
+ './examples/import/import-module.md?raw'
+ );
+
+ readonly exampleHtml: TuiRawLoaderContent = import(
+ './examples/import/insert-template.md?raw'
+ );
+
+ readonly example1: TuiDocExample = {
+ HTML: import('./examples/1/index.html?raw'),
+ };
+
+ readonly example2: TuiDocExample = {
+ HTML: import('./examples/2/index.html?raw'),
+ };
+
+ readonly example3: TuiDocExample = {
+ HTML: import('./examples/3/index.html?raw'),
+ };
+}
diff --git a/projects/demo/src/modules/experimental/button-group/button-group.module.ts b/projects/demo/src/modules/experimental/button-group/button-group.module.ts
new file mode 100644
index 0000000000000..1c75789d7ed9a
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/button-group.module.ts
@@ -0,0 +1,37 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiNotificationModule} from '@taiga-ui/core';
+import {
+ TuiBadgedContentModule,
+ TuiButtonGroupModule,
+ TuiButtonModule,
+ TuiButtonVerticalModule,
+ TuiSurfaceModule,
+} from '@taiga-ui/experimental';
+
+import {ExampleTuiButtonGroupComponent} from './button-group.component';
+import {TuiButtonGroupExample1} from './examples/1';
+import {TuiButtonGroupExample2} from './examples/2';
+import {TuiButtonGroupExample3} from './examples/3';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ TuiNotificationModule,
+ TuiButtonModule,
+ tuiGetDocModules(ExampleTuiButtonGroupComponent),
+ TuiButtonVerticalModule,
+ TuiSurfaceModule,
+ TuiButtonGroupModule,
+ TuiBadgedContentModule,
+ ],
+ declarations: [
+ ExampleTuiButtonGroupComponent,
+ TuiButtonGroupExample1,
+ TuiButtonGroupExample2,
+ TuiButtonGroupExample3,
+ ],
+ exports: [ExampleTuiButtonGroupComponent],
+})
+export class ExampleTuiButtonGroupModule {}
diff --git a/projects/demo/src/modules/experimental/button-group/button-group.template.html b/projects/demo/src/modules/experimental/button-group/button-group.template.html
new file mode 100644
index 0000000000000..0e89a2f098026
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/button-group.template.html
@@ -0,0 +1,59 @@
+
+
+
+ This code is
+ experimental
+ and is a subject to change. Expect final solution to be shipped in the next major version
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
Import module:
+
+
+
+
+ -
+
Add to the template:
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/experimental/button-group/examples/1/index.html b/projects/demo/src/modules/experimental/button-group/examples/1/index.html
new file mode 100644
index 0000000000000..4a70cca697ce4
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/1/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/experimental/button-group/examples/1/index.less b/projects/demo/src/modules/experimental/button-group/examples/1/index.less
new file mode 100644
index 0000000000000..36b88fe5a1597
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/1/index.less
@@ -0,0 +1,15 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.shadow {
+ box-shadow: var(--tui-shadow);
+ border-radius: 1rem;
+
+ [tuiButton] {
+ font-size: 0.8125rem;
+ width: 100%;
+ }
+}
diff --git a/projects/demo/src/modules/experimental/button-group/examples/1/index.ts b/projects/demo/src/modules/experimental/button-group/examples/1/index.ts
new file mode 100644
index 0000000000000..3cefd7843236d
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/1/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-button-group-example-1',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ encapsulation,
+ changeDetection,
+})
+export class TuiButtonGroupExample1 {}
diff --git a/projects/demo/src/modules/experimental/button-group/examples/2/index.html b/projects/demo/src/modules/experimental/button-group/examples/2/index.html
new file mode 100644
index 0000000000000..947b4867bb7a2
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/2/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/experimental/button-group/examples/2/index.less b/projects/demo/src/modules/experimental/button-group/examples/2/index.less
new file mode 100644
index 0000000000000..a19c7b404b7e0
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/2/index.less
@@ -0,0 +1,15 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.shadow {
+ background: var(--tui-clear);
+ border-radius: 1rem;
+
+ [tuiButton] {
+ font-size: 0.8125rem;
+ width: 100%;
+ }
+}
diff --git a/projects/demo/src/modules/experimental/button-group/examples/2/index.ts b/projects/demo/src/modules/experimental/button-group/examples/2/index.ts
new file mode 100644
index 0000000000000..8decc0e110e8f
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/2/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-button-group-example-2',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ encapsulation,
+ changeDetection,
+})
+export class TuiButtonGroupExample2 {}
diff --git a/projects/demo/src/modules/experimental/button-group/examples/3/index.html b/projects/demo/src/modules/experimental/button-group/examples/3/index.html
new file mode 100644
index 0000000000000..c04ff84300787
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/3/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/experimental/button-group/examples/3/index.less b/projects/demo/src/modules/experimental/button-group/examples/3/index.less
new file mode 100644
index 0000000000000..c674e80407690
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/3/index.less
@@ -0,0 +1,28 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+[tuiSurface][data-surface='custom'],
+.shadow {
+ background: linear-gradient(334.83deg, #7d8ca0 0%, #647382 100%);
+
+ [tuiButton] {
+ color: rgba(255, 255, 255, 0.8);
+
+ &:hover {
+ color: #fff;
+ }
+ }
+}
+
+.shadow {
+ box-shadow: var(--tui-shadow);
+ border-radius: 1rem;
+
+ [tuiButton] {
+ font-size: 0.8125rem;
+ width: 100%;
+ }
+}
diff --git a/projects/demo/src/modules/experimental/button-group/examples/3/index.ts b/projects/demo/src/modules/experimental/button-group/examples/3/index.ts
new file mode 100644
index 0000000000000..052c8d9a8791e
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/3/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-button-group-example-3',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ encapsulation,
+ changeDetection,
+})
+export class TuiButtonGroupExample3 {}
diff --git a/projects/demo/src/modules/experimental/button-group/examples/import/import-module.md b/projects/demo/src/modules/experimental/button-group/examples/import/import-module.md
new file mode 100644
index 0000000000000..99e96d5f8c097
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiButtonGroupModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+ imports: [
+ // ...
+ TuiButtonModule,
+ TuiButtonGroupModule,
+ ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/experimental/button-group/examples/import/insert-template.md b/projects/demo/src/modules/experimental/button-group/examples/import/insert-template.md
new file mode 100644
index 0000000000000..ae3af4f18f3d9
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group/examples/import/insert-template.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+```
diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
index 99021f8b75940..8ccf0a2845c84 100644
--- a/projects/demo/used-icons.ts
+++ b/projects/demo/used-icons.ts
@@ -101,6 +101,7 @@ export const TUI_USED_ICONS = [
'tuiIconLock',
'tuiIconUsers',
'tuiIconClock',
+ 'tuiIconArrowRightCircleLarge',
'tuiIconPlusSquareLarge',
'tuiIconTarget',
'tuiIconGooglePay',
diff --git a/projects/experimental/directives/button-group/button-group.component.ts b/projects/experimental/directives/button-group/button-group.component.ts
new file mode 100644
index 0000000000000..d1385ce579b11
--- /dev/null
+++ b/projects/experimental/directives/button-group/button-group.component.ts
@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+ template: '',
+ styleUrls: ['./button-group.style.less'],
+ encapsulation: ViewEncapsulation.None,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: {
+ class: 'tui-button-group-styles',
+ },
+})
+export class TuiButtonGroupComponent {}
diff --git a/projects/experimental/directives/button-group/button-group.directive.ts b/projects/experimental/directives/button-group/button-group.directive.ts
new file mode 100644
index 0000000000000..a9df64a25d55e
--- /dev/null
+++ b/projects/experimental/directives/button-group/button-group.directive.ts
@@ -0,0 +1,15 @@
+import {Directive, Inject} from '@angular/core';
+import {TuiDirectiveStylesService} from '@taiga-ui/cdk';
+
+import {TuiButtonGroupComponent} from './button-group.component';
+
+@Directive({
+ selector: '[tuiButtonGroup]',
+})
+export class TuiButtonGroupDirective {
+ constructor(
+ @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+ ) {
+ directiveStyles.addComponent(TuiButtonGroupComponent);
+ }
+}
diff --git a/projects/experimental/directives/button-group/button-group.module.ts b/projects/experimental/directives/button-group/button-group.module.ts
new file mode 100644
index 0000000000000..b06322d26f43e
--- /dev/null
+++ b/projects/experimental/directives/button-group/button-group.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {TuiButtonGroupComponent} from './button-group.component';
+import {TuiButtonGroupDirective} from './button-group.directive';
+
+@NgModule({
+ declarations: [TuiButtonGroupDirective, TuiButtonGroupComponent],
+ exports: [TuiButtonGroupDirective],
+})
+export class TuiButtonGroupModule {}
diff --git a/projects/experimental/directives/button-group/button-group.style.less b/projects/experimental/directives/button-group/button-group.style.less
new file mode 100644
index 0000000000000..b522478bba75f
--- /dev/null
+++ b/projects/experimental/directives/button-group/button-group.style.less
@@ -0,0 +1,12 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiButtonGroup] {
+ display: flex;
+ border-radius: 1.5rem;
+
+ > * {
+ flex-grow: 1;
+ flex-basis: 0;
+ border-radius: 0;
+ }
+}
diff --git a/projects/experimental/directives/button-group/index.ts b/projects/experimental/directives/button-group/index.ts
new file mode 100644
index 0000000000000..0c4cf1d358274
--- /dev/null
+++ b/projects/experimental/directives/button-group/index.ts
@@ -0,0 +1,3 @@
+export * from './button-group.component';
+export * from './button-group.directive';
+export * from './button-group.module';
diff --git a/projects/experimental/directives/button-group/ng-package.json b/projects/experimental/directives/button-group/ng-package.json
new file mode 100644
index 0000000000000..bebf62dcb5e51
--- /dev/null
+++ b/projects/experimental/directives/button-group/ng-package.json
@@ -0,0 +1,5 @@
+{
+ "lib": {
+ "entryFile": "index.ts"
+ }
+}
diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts
index 78a556d9b6c25..7d2856ccfe8b0 100644
--- a/projects/experimental/directives/index.ts
+++ b/projects/experimental/directives/index.ts
@@ -1,5 +1,6 @@
export * from '@taiga-ui/experimental/directives/appearance';
export * from '@taiga-ui/experimental/directives/button-close';
+export * from '@taiga-ui/experimental/directives/button-group';
export * from '@taiga-ui/experimental/directives/button-vertical';
export * from '@taiga-ui/experimental/directives/card';
export * from '@taiga-ui/experimental/directives/cell';