From 9f16da7f95c4b51b74dd264468b254604697f626 Mon Sep 17 00:00:00 2001
From: Vladimir Potekhin <46284632+vladimirpotekhin@users.noreply.github.com>
Date: Thu, 14 Sep 2023 11:44:17 +0300
Subject: [PATCH] feat(experimental): add new component `Badge` (#5247)

---
 projects/core/animations/animations.ts        |  21 +
 projects/demo/src/modules/app/app.routes.ts   |   8 +
 projects/demo/src/modules/app/pages.ts        |   6 +
 .../experimental/badge/badge.component.ts     |  73 +++
 .../experimental/badge/badge.module.ts        |  51 +++
 .../experimental/badge/badge.template.html    | 152 +++++++
 .../experimental/badge/examples/1/index.html  |  29 ++
 .../experimental/badge/examples/1/index.less  |  13 +
 .../experimental/badge/examples/1/index.ts    |  12 +
 .../experimental/badge/examples/2/index.html  |  30 ++
 .../experimental/badge/examples/2/index.ts    |  11 +
 .../experimental/badge/examples/3/index.html  | 111 +++++
 .../experimental/badge/examples/3/index.less  |   3 +
 .../experimental/badge/examples/3/index.ts    |  14 +
 .../experimental/badge/examples/4/index.html  |  16 +
 .../experimental/badge/examples/4/index.less  |   8 +
 .../experimental/badge/examples/4/index.ts    |  12 +
 .../experimental/badge/examples/5/index.html  |  16 +
 .../experimental/badge/examples/5/index.less  |  10 +
 .../experimental/badge/examples/5/index.ts    |  12 +
 .../badge/examples/import/import-module.md    |  13 +
 .../badge/examples/import/insert-template.md  |   6 +
 .../components/badge/badge.component.ts       |  43 ++
 .../components/badge/badge.module.ts          |  11 +
 .../components/badge/badge.style.less         | 428 ++++++++++++++++++
 .../components/badge/badge.template.html      |  16 +
 .../experimental/components/badge/index.ts    |   2 +
 .../components/badge/ng-package.json          |   8 +
 projects/experimental/components/index.ts     |   1 +
 29 files changed, 1136 insertions(+)
 create mode 100644 projects/demo/src/modules/experimental/badge/badge.component.ts
 create mode 100644 projects/demo/src/modules/experimental/badge/badge.module.ts
 create mode 100644 projects/demo/src/modules/experimental/badge/badge.template.html
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/1/index.html
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/1/index.less
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/1/index.ts
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/2/index.html
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/2/index.ts
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/3/index.html
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/3/index.less
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/3/index.ts
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/4/index.html
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/4/index.less
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/4/index.ts
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/5/index.html
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/5/index.less
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/5/index.ts
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/import/import-module.md
 create mode 100644 projects/demo/src/modules/experimental/badge/examples/import/insert-template.md
 create mode 100644 projects/experimental/components/badge/badge.component.ts
 create mode 100644 projects/experimental/components/badge/badge.module.ts
 create mode 100644 projects/experimental/components/badge/badge.style.less
 create mode 100644 projects/experimental/components/badge/badge.template.html
 create mode 100644 projects/experimental/components/badge/index.ts
 create mode 100644 projects/experimental/components/badge/ng-package.json

diff --git a/projects/core/animations/animations.ts b/projects/core/animations/animations.ts
index 18acaad22da6..728e970b3c14 100644
--- a/projects/core/animations/animations.ts
+++ b/projects/core/animations/animations.ts
@@ -211,6 +211,27 @@ export const tuiScaleIn = trigger(`tuiScaleIn`, [
     ),
 ]);
 
+export const tuiPop = trigger(`tuiPop`, [
+    transition(
+        `:enter`,
+        [
+            style({transform: `scale(0)`}),
+            animate(TRANSITION, style({transform: `scale(1.1)`})),
+            animate(TRANSITION, style({transform: `scale(1)`})),
+        ],
+        DURATION,
+    ),
+    transition(
+        `:leave`,
+        [
+            style({transform: `scale(1)`}),
+            animate(TRANSITION, style({transform: `scale(1.1)`})),
+            animate(TRANSITION, style({transform: `scale(0)`})),
+        ],
+        DURATION,
+    ),
+]);
+
 export const tuiScaleInList = trigger(`tuiScaleInList`, [
     transition(
         `* => *`,
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index ab5e66a68a41..b759a02f0552 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -206,6 +206,14 @@ export const ROUTES: Routes = [
             title: `Avatar`,
         },
     },
+    {
+        path: `experimental/badge`,
+        loadChildren: async () =>
+            (await import(`../experimental/badge/badge.module`)).ExampleTuiBadgeModule,
+        data: {
+            title: `Badge `,
+        },
+    },
     {
         path: `experimental/fade`,
         loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index b0f71d713d88..10b46710c50b 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -821,6 +821,12 @@ export const pages = [
         keywords: `аватар, image, pic, icon, картинка, изображение, avatar, stack`,
         route: `/experimental/avatar`,
     },
+    {
+        section: `Experimental`,
+        title: `Badge`,
+        keywords: `бэдж, бейдж, овал, badge, нотификация`,
+        route: `/experimental/badge`,
+    },
     {
         section: `Experimental`,
         title: `Fade`,
diff --git a/projects/demo/src/modules/experimental/badge/badge.component.ts b/projects/demo/src/modules/experimental/badge/badge.component.ts
new file mode 100644
index 000000000000..3033a13afbdd
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/badge.component.ts
@@ -0,0 +1,73 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {RawLoaderContent, TuiDocExample} from '@taiga-ui/addon-doc';
+import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import {TuiStatus} from '@taiga-ui/kit';
+
+@Component({
+    selector: 'example-badge',
+    templateUrl: './badge.template.html',
+    changeDetection,
+})
+export class ExampleTuiBadgeComponent {
+    readonly exampleModule: RawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: RawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('./examples/2/index.ts?raw'),
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        TypeScript: import('./examples/3/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
+
+    readonly example4: TuiDocExample = {
+        TypeScript: import('./examples/4/index.ts?raw'),
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        TypeScript: import('./examples/5/index.ts?raw'),
+        HTML: import('./examples/5/index.html?raw'),
+        LESS: import('./examples/5/index.less?raw'),
+    };
+
+    readonly appearanceVariants: ReadonlyArray<TuiStatus | 'accent' | 'light'> = [
+        'accent',
+        'default',
+        'primary',
+        'custom',
+        'success',
+        'error',
+        'warning',
+        'info',
+        'neutral',
+        'light',
+    ];
+
+    appearance = this.appearanceVariants[0];
+
+    readonly sizeVariants: ReadonlyArray<TuiSizeS | TuiSizeXL> = ['s', 'm', 'l', 'xl'];
+
+    size: TuiSizeS | TuiSizeXL = this.sizeVariants[1];
+
+    hoverable = false;
+
+    contentTypeVariants = ['text', 'with icon', 'image'];
+    contentType = this.contentTypeVariants[0];
+}
diff --git a/projects/demo/src/modules/experimental/badge/badge.module.ts b/projects/demo/src/modules/experimental/badge/badge.module.ts
new file mode 100644
index 000000000000..337a8fd5258f
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/badge.module.ts
@@ -0,0 +1,51 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiRepeatTimesModule} from '@taiga-ui/cdk';
+import {
+    TuiLabelModule,
+    TuiModeModule,
+    TuiNotificationModule,
+    TuiSvgModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {TuiBadgeModule, TuiFadeModule} from '@taiga-ui/experimental';
+import {TuiRadioListModule} from '@taiga-ui/kit';
+
+import {ExampleTuiBadgeComponent} from './badge.component';
+import {TuiBadgeExample1} from './examples/1';
+import {TuiBadgeExample2} from './examples/2';
+import {TuiBadgeExample3} from './examples/3';
+import {TuiBadgeExample4} from './examples/4';
+import {TuiBadgeExample5} from './examples/5';
+
+@NgModule({
+    imports: [
+        TuiBadgeModule,
+        TuiModeModule,
+        TuiRepeatTimesModule,
+        TuiSvgModule,
+        TuiRadioListModule,
+        FormsModule,
+        CommonModule,
+        TuiFadeModule,
+        TuiNotificationModule,
+        TuiAddonDocModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBadgeComponent)),
+        TuiBadgeModule,
+        TuiTextfieldControllerModule,
+        TuiLabelModule,
+    ],
+    declarations: [
+        ExampleTuiBadgeComponent,
+        TuiBadgeExample1,
+        TuiBadgeExample2,
+        TuiBadgeExample3,
+        TuiBadgeExample4,
+        TuiBadgeExample5,
+    ],
+    exports: [ExampleTuiBadgeComponent],
+})
+export class ExampleTuiBadgeModule {}
diff --git a/projects/demo/src/modules/experimental/badge/badge.template.html b/projects/demo/src/modules/experimental/badge/badge.template.html
new file mode 100644
index 000000000000..f560f2c0a5d1
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/badge.template.html
@@ -0,0 +1,152 @@
+<tui-doc-page
+    header="Badge"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>New version for Badge component following updated design specs for displaying text, pictures and icons.</p>
+
+        <tui-doc-example
+            id="base"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-badge-example-1></tui-badge-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="sizes"
+            heading="Sizes"
+            [content]="example2"
+        >
+            <tui-badge-example-2></tui-badge-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="content-type"
+            heading="Content type (mobile platform)"
+            [content]="example3"
+        >
+            <tui-badge-example-3></tui-badge-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="fade"
+            heading="Long value"
+            [content]="example4"
+        >
+            <tui-badge-example-4></tui-badge-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="custom"
+            heading="Customization"
+            [content]="example5"
+        >
+            <tui-badge-example-5></tui-badge-example-5>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab>
+        <tui-doc-demo>
+            <p>
+                <tui-badge
+                    *ngIf="contentType === 'with icon'"
+                    [appearance]="appearance"
+                    [hoverable]="hoverable"
+                    [size]="size"
+                >
+                    <tui-svg src="tuiIconCheck"></tui-svg>
+                    <div tuiFade>Taiga UI</div>
+                </tui-badge>
+
+                <tui-badge
+                    *ngIf="contentType === 'text'"
+                    [appearance]="appearance"
+                    [hoverable]="hoverable"
+                    [size]="size"
+                >
+                    Taiga UI
+                </tui-badge>
+
+                <tui-badge
+                    *ngIf="contentType === 'image'"
+                    [appearance]="appearance"
+                    [hoverable]="hoverable"
+                    [size]="size"
+                >
+                    <img
+                        alt="market"
+                        src="assets/images/avatar.jpg"
+                    />
+                </tui-badge>
+            </p>
+        </tui-doc-demo>
+        <label
+            tuiLabel="Content type"
+            class="tui-space_vertical-3"
+        >
+            <tui-radio-list
+                orientation="horizontal"
+                [items]="contentTypeVariants"
+                [(ngModel)]="contentType"
+            ></tui-radio-list>
+        </label>
+        <tui-doc-documentation>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="size"
+                documentationPropertyType="TuiSizeL"
+                [documentationPropertyValues]="sizeVariants"
+                [(documentationPropertyValue)]="size"
+            >
+                Size
+            </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="appearance"
+                documentationPropertyType="TuiStatus"
+                [documentationPropertyValues]="appearanceVariants"
+                [(documentationPropertyValue)]="appearance"
+            >
+                Appearance
+            </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="hoverable"
+                documentationPropertyType="boolean"
+                [(documentationPropertyValue)]="hoverable"
+            >
+                Enable hovered state
+            </ng-template>
+        </tui-doc-documentation>
+    </ng-template>
+
+    <ng-template pageTab>
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import into a module</p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>
diff --git a/projects/demo/src/modules/experimental/badge/examples/1/index.html b/projects/demo/src/modules/experimental/badge/examples/1/index.html
new file mode 100644
index 000000000000..543bb8706770
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/1/index.html
@@ -0,0 +1,29 @@
+<tui-badge appearance="primary">Primary</tui-badge>
+
+<tui-badge appearance="accent">Accent</tui-badge>
+
+<tui-badge appearance="light">Light</tui-badge>
+
+<tui-badge>Default</tui-badge>
+
+<tui-badge appearance="success">Success</tui-badge>
+
+<tui-badge appearance="error">Error</tui-badge>
+<tui-badge appearance="warning">Warning</tui-badge>
+
+<tui-badge appearance="neutral">Neutral</tui-badge>
+<tui-badge appearance="info">Info</tui-badge>
+
+<p>
+    Use CSS and
+    <code>appearance="custom"</code>
+    for support colors
+</p>
+<tui-badge
+    *tuiRepeatTimes="let index of 20"
+    appearance="custom"
+    class="support-{{ index + 1 }}"
+    [hoverable]="true"
+>
+    Taiga
+</tui-badge>
diff --git a/projects/demo/src/modules/experimental/badge/examples/1/index.less b/projects/demo/src/modules/experimental/badge/examples/1/index.less
new file mode 100644
index 000000000000..a11c3840af21
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/1/index.less
@@ -0,0 +1,13 @@
+tui-badge {
+    margin: 0.5rem;
+}
+
+@iterations: 20;
+
+.loop (@i) when (@i > 0) {
+    .support-@{i} {
+        background-color: ~'var(--tui-support-@{i}, var(--tui-support-0@{i}))';
+    }
+    .loop(@i - 1);
+}
+.loop (@iterations);
diff --git a/projects/demo/src/modules/experimental/badge/examples/1/index.ts b/projects/demo/src/modules/experimental/badge/examples/1/index.ts
new file mode 100644
index 000000000000..9a952995977d
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/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-badge-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiBadgeExample1 {}
diff --git a/projects/demo/src/modules/experimental/badge/examples/2/index.html b/projects/demo/src/modules/experimental/badge/examples/2/index.html
new file mode 100644
index 000000000000..f875b13708ba
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/2/index.html
@@ -0,0 +1,30 @@
+<tui-badge
+    appearance="primary"
+    size="xl"
+>
+    x-large
+</tui-badge>
+
+<tui-badge
+    appearance="primary"
+    size="l"
+    class="tui-space_left-1"
+>
+    large
+</tui-badge>
+
+<tui-badge
+    appearance="primary"
+    size="m"
+    class="tui-space_left-1"
+>
+    medium
+</tui-badge>
+
+<tui-badge
+    appearance="primary"
+    size="s"
+    class="tui-space_left-1"
+>
+    small
+</tui-badge>
diff --git a/projects/demo/src/modules/experimental/badge/examples/2/index.ts b/projects/demo/src/modules/experimental/badge/examples/2/index.ts
new file mode 100644
index 000000000000..334063c7b2f6
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/2/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-badge-example-2',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiBadgeExample2 {}
diff --git a/projects/demo/src/modules/experimental/badge/examples/3/index.html b/projects/demo/src/modules/experimental/badge/examples/3/index.html
new file mode 100644
index 000000000000..bed90131c137
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/3/index.html
@@ -0,0 +1,111 @@
+<div class="container">
+    <h4 class="tui-space_vertical-1">Value with icon</h4>
+    <tui-badge
+        appearance="primary"
+        size="xl"
+    >
+        <tui-svg src="tuiIconBox"></tui-svg>
+        x-large
+    </tui-badge>
+
+    <tui-badge
+        appearance="primary"
+        size="l"
+        class="tui-space_left-1"
+    >
+        <tui-svg src="tuiIconBox"></tui-svg>
+        large
+    </tui-badge>
+
+    <tui-badge
+        appearance="primary"
+        size="m"
+        class="tui-space_left-1"
+    >
+        <tui-svg src="tuiIconBox"></tui-svg>
+        medium
+    </tui-badge>
+
+    <tui-badge
+        appearance="primary"
+        size="s"
+        class="tui-space_left-1"
+    >
+        <tui-svg src="tuiIconBox"></tui-svg>
+        small
+    </tui-badge>
+</div>
+
+<div>
+    <h4 class="tui-space_top-3 tui-space_bottom-1">Icon only</h4>
+    <tui-badge
+        appearance="accent"
+        size="xl"
+    >
+        <tui-svg src="tuiIconBox"></tui-svg>
+    </tui-badge>
+
+    <tui-badge
+        appearance="accent"
+        size="l"
+        class="tui-space_left-1"
+    >
+        <tui-svg src="tuiIconBox"></tui-svg>
+    </tui-badge>
+
+    <tui-badge
+        appearance="accent"
+        size="m"
+        class="tui-space_left-1"
+    >
+        <tui-svg src="tuiIconBox"></tui-svg>
+    </tui-badge>
+
+    <tui-badge
+        appearance="accent"
+        size="s"
+        class="tui-space_left-1"
+    >
+        <tui-svg src="tuiIconBox"></tui-svg>
+    </tui-badge>
+</div>
+
+<div>
+    <h4 class="tui-space_top-3 tui-space_bottom-1">Image</h4>
+    <tui-badge size="xl">
+        <img
+            alt="market"
+            src="assets/images/avatar.jpg"
+        />
+    </tui-badge>
+
+    <tui-badge
+        size="l"
+        class="tui-space_left-1"
+    >
+        <img
+            alt="market"
+            src="assets/images/avatar.jpg"
+        />
+    </tui-badge>
+
+    <tui-badge
+        size="m"
+        class="tui-space_left-1"
+    >
+        <img
+            alt="market"
+            src="assets/images/avatar.jpg"
+        />
+    </tui-badge>
+
+    <tui-badge
+        size="s"
+        class="tui-space_left-1"
+    >
+        <img
+            alt="market"
+            src="assets/images/avatar.jpg"
+        />
+    </tui-badge>
+</div>
diff --git a/projects/demo/src/modules/experimental/badge/examples/3/index.less b/projects/demo/src/modules/experimental/badge/examples/3/index.less
new file mode 100644
index 000000000000..fa4436d4ab0c
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/3/index.less
@@ -0,0 +1,3 @@
+.container {
+    min-width: 18rem;
+}
diff --git a/projects/demo/src/modules/experimental/badge/examples/3/index.ts b/projects/demo/src/modules/experimental/badge/examples/3/index.ts
new file mode 100644
index 000000000000..bb9a36d12f47
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/3/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TUI_PLATFORM} from '@taiga-ui/cdk';
+
+@Component({
+    selector: 'tui-badge-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+    providers: [{provide: TUI_PLATFORM, useValue: 'ios'}],
+})
+export class TuiBadgeExample3 {}
diff --git a/projects/demo/src/modules/experimental/badge/examples/4/index.html b/projects/demo/src/modules/experimental/badge/examples/4/index.html
new file mode 100644
index 000000000000..d17049e70b36
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/4/index.html
@@ -0,0 +1,16 @@
+<tui-badge
+    appearance="primary"
+    size="xl"
+    class="badge"
+>
+    <div tuiFade>Very long value in badge</div>
+</tui-badge>
+
+<tui-badge
+    appearance="accent"
+    size="l"
+    class="badge tui-space_top-3"
+>
+    <tui-svg src="tuiIconBox"></tui-svg>
+    <div class="t-ellipsis">Very long value in badge</div>
+</tui-badge>
diff --git a/projects/demo/src/modules/experimental/badge/examples/4/index.less b/projects/demo/src/modules/experimental/badge/examples/4/index.less
new file mode 100644
index 000000000000..001a6b3aab30
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/4/index.less
@@ -0,0 +1,8 @@
+.badge {
+    max-width: 10rem;
+}
+
+.t-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/projects/demo/src/modules/experimental/badge/examples/4/index.ts b/projects/demo/src/modules/experimental/badge/examples/4/index.ts
new file mode 100644
index 000000000000..324a4575bc1b
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/4/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-badge-example-4',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiBadgeExample4 {}
diff --git a/projects/demo/src/modules/experimental/badge/examples/5/index.html b/projects/demo/src/modules/experimental/badge/examples/5/index.html
new file mode 100644
index 000000000000..98ab581785a4
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/5/index.html
@@ -0,0 +1,16 @@
+<tui-badge
+    appearance="custom"
+    size="xl"
+    class="custom-1"
+>
+    <tui-svg src="tuiIconLock"></tui-svg>
+    10 000 000 $
+</tui-badge>
+
+<tui-badge
+    appearance="custom"
+    size="xl"
+    class="custom-2 tui-space_left-3"
+>
+    Taiga
+</tui-badge>
diff --git a/projects/demo/src/modules/experimental/badge/examples/5/index.less b/projects/demo/src/modules/experimental/badge/examples/5/index.less
new file mode 100644
index 000000000000..3ef5931f6c58
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/5/index.less
@@ -0,0 +1,10 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
+.custom-1 {
+    .gradient(#0094cf, #24c0ff);
+    .shadow();
+}
+
+.custom-2 {
+    .gradient(#c86dd7, #3023ae);
+}
diff --git a/projects/demo/src/modules/experimental/badge/examples/5/index.ts b/projects/demo/src/modules/experimental/badge/examples/5/index.ts
new file mode 100644
index 000000000000..8adec34ac378
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/5/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-badge-example-5',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiBadgeExample5 {}
diff --git a/projects/demo/src/modules/experimental/badge/examples/import/import-module.md b/projects/demo/src/modules/experimental/badge/examples/import/import-module.md
new file mode 100644
index 000000000000..9291b3c46c8d
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/import/import-module.md
@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiBadgeModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiBadgeModule,
+  ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/experimental/badge/examples/import/insert-template.md b/projects/demo/src/modules/experimental/badge/examples/import/insert-template.md
new file mode 100644
index 000000000000..9efe9da5dc86
--- /dev/null
+++ b/projects/demo/src/modules/experimental/badge/examples/import/insert-template.md
@@ -0,0 +1,6 @@
+```html
+<tui-badge
+  appearance="primary"
+  value="value"
+></tui-badge>
+```
diff --git a/projects/experimental/components/badge/badge.component.ts b/projects/experimental/components/badge/badge.component.ts
new file mode 100644
index 000000000000..f9641c439fc1
--- /dev/null
+++ b/projects/experimental/components/badge/badge.component.ts
@@ -0,0 +1,43 @@
+import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import {TUI_PLATFORM, TuiPlatform} from '@taiga-ui/cdk';
+import {
+    MODE_PROVIDER,
+    TUI_MODE,
+    TuiBrightness,
+    tuiPop,
+    TuiSizeS,
+    TuiSizeXL,
+} from '@taiga-ui/core';
+import {TuiStatus} from '@taiga-ui/kit';
+import {Observable} from 'rxjs';
+
+@Component({
+    selector: 'tui-badge',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './badge.template.html',
+    styleUrls: ['./badge.style.less'],
+    providers: [MODE_PROVIDER],
+    animations: [tuiPop],
+    host: {
+        '[attr.data-platform]': 'platform',
+        '[attr.data-appearance]': 'appearance',
+        '[attr.data-size]': 'size',
+        '[class._hoverable]': 'hoverable',
+        '($.data-mode.attr)': 'mode$',
+    },
+})
+export class TuiBadgeComponent {
+    @Input()
+    size: TuiSizeS | TuiSizeXL = 'l';
+
+    @Input()
+    appearance: TuiStatus | 'accent' | 'light' = 'default';
+
+    @Input()
+    hoverable = false;
+
+    constructor(
+        @Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>,
+        @Inject(TUI_PLATFORM) readonly platform: TuiPlatform,
+    ) {}
+}
diff --git a/projects/experimental/components/badge/badge.module.ts b/projects/experimental/components/badge/badge.module.ts
new file mode 100644
index 000000000000..054147726216
--- /dev/null
+++ b/projects/experimental/components/badge/badge.module.ts
@@ -0,0 +1,11 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+import {TuiBadgeComponent} from './badge.component';
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [TuiBadgeComponent],
+    exports: [TuiBadgeComponent],
+})
+export class TuiBadgeModule {}
diff --git a/projects/experimental/components/badge/badge.style.less b/projects/experimental/components/badge/badge.style.less
new file mode 100644
index 000000000000..9f71e006909a
--- /dev/null
+++ b/projects/experimental/components/badge/badge.style.less
@@ -0,0 +1,428 @@
+@import 'taiga-ui-local';
+
+:host {
+    .transition(background);
+
+    --left-content-color: currentColor;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    color: var(--tui-base-01);
+    border-radius: 6rem;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: middle;
+    font: var(--tui-font-text-s);
+    max-width: 100%;
+
+    &:after {
+        .transition(background);
+        .fullsize();
+        content: '';
+        border-radius: inherit;
+        pointer-events: none;
+    }
+
+    &._hoverable:hover,
+    &._hoverable:active {
+        &[data-appearance='custom']:after {
+            background: var(--tui-clear);
+        }
+    }
+
+    &[data-appearance='primary'] {
+        background: var(--tui-primary);
+        color: var(--tui-primary-text);
+
+        &._hoverable:hover {
+            background: var(--tui-primary-hover);
+        }
+
+        &._hoverable:active {
+            background: var(--tui-primary-active);
+        }
+    }
+
+    &[data-appearance='accent'] {
+        background: var(--tui-accent);
+        color: var(--tui-accent-text);
+
+        &._hoverable:hover {
+            background: var(--tui-accent-hover);
+        }
+
+        &._hoverable:active {
+            background: var(--tui-accent-active);
+        }
+    }
+
+    &[data-appearance='light'] {
+        background: var(--tui-secondary);
+        color: var(--tui-text-01);
+
+        &._hoverable:hover {
+            background: var(--tui-secondary-hover);
+        }
+
+        &._hoverable:active {
+            background: var(--tui-secondary-active);
+        }
+
+        &[data-platform='ios'],
+        &[data-platform='android'] {
+            background: var(--tui-base-06);
+        }
+    }
+
+    &[data-appearance='error'] {
+        --left-content-color: var(--tui-error-fill);
+        background: var(--tui-error-bg);
+        color: var(--tui-text-01);
+
+        &._hoverable:hover,
+        &._hoverable:active {
+            background: var(--tui-error-bg-hover);
+        }
+
+        &[data-mode='onDark'] {
+            background: var(--tui-error-bg-night);
+            color: var(--tui-text-01-night);
+
+            &._hoverable:hover,
+            &._hoverable:active {
+                background: var(--tui-error-bg-night-hover);
+            }
+        }
+    }
+
+    &[data-appearance='success'] {
+        --left-content-color: var(--tui-success-fill);
+        background: var(--tui-success-bg);
+        color: var(--tui-text-01);
+
+        &._hoverable:hover,
+        &._hoverable:active {
+            background: var(--tui-success-bg-hover);
+        }
+
+        &[data-mode='onDark'] {
+            background: var(--tui-success-bg-night);
+            color: var(--tui-text-01-night);
+
+            &._hoverable:hover,
+            &._hoverable:active {
+                background: var(--tui-success-bg-night-hover);
+            }
+        }
+    }
+
+    &[data-appearance='warning'] {
+        --left-content-color: var(--tui-warning-fill);
+        background: var(--tui-warning-bg);
+        color: var(--tui-text-01);
+
+        &._hoverable:hover,
+        &._hoverable:active {
+            background: var(--tui-warning-bg-hover);
+        }
+
+        &[data-mode='onDark'] {
+            background: var(--tui-warning-bg-night);
+            color: var(--tui-text-01-night);
+
+            &._hoverable:hover,
+            &._hoverable:active {
+                background: var(--tui-warning-bg-night-hover);
+            }
+        }
+    }
+
+    &[data-appearance='info'] {
+        --left-content-color: var(--tui-info-fill);
+        background: var(--tui-info-bg);
+        color: var(--tui-text-01);
+
+        &._hoverable:hover,
+        &._hoverable:active {
+            background: var(--tui-info-bg-hover);
+        }
+
+        &[data-mode='onDark'] {
+            background: var(--tui-info-bg-night);
+            color: var(--tui-text-01-night);
+
+            &._hoverable:hover,
+            &._hoverable:active {
+                background: var(--tui-info-bg-night-hover);
+            }
+        }
+    }
+
+    &[data-appearance='neutral'] {
+        --left-content-color: var(--tui-neutral-fill);
+        background: var(--tui-neutral-bg);
+        color: var(--tui-text-01);
+
+        &._hoverable:hover,
+        &._hoverable:active {
+            background: var(--tui-neutral-bg-hover);
+        }
+
+        &[data-mode='onDark'] {
+            background: var(--tui-neutral-bg-night);
+            color: var(--tui-text-01-night);
+
+            &._hoverable:hover,
+            &._hoverable:active {
+                background: var(--tui-neutral-bg-night-hover);
+            }
+        }
+    }
+
+    &[data-appearance='default'] {
+        background: var(--tui-base-06);
+
+        &:not([data-mode]) {
+            &._hoverable:hover {
+                background: var(--tui-base-07);
+            }
+
+            &._hoverable:active {
+                background: var(--tui-base-08);
+            }
+        }
+
+        &[data-mode='onDark'] {
+            background: var(--tui-clear-inverse-hover);
+
+            &._hoverable:hover {
+                background: var(--tui-clear-inverse-active);
+            }
+
+            &._hoverable:active {
+                background: var(--tui-clear-inverse-active);
+            }
+        }
+
+        &[data-mode='onLight'] {
+            background: var(--tui-clear);
+            color: var(--tui-text-01);
+
+            &._hoverable:hover {
+                background: var(--tui-clear-hover);
+            }
+
+            &._hoverable:active {
+                background: var(--tui-clear-active);
+            }
+        }
+    }
+
+    &._hoverable {
+        cursor: pointer;
+    }
+
+    &:not(._empty-value) {
+        padding: 0 0.25rem;
+
+        &[data-size='xl'] {
+            padding: 0 0.375rem;
+        }
+
+        &[data-size='xl'][data-platform='web'] {
+            padding: 0 0.5rem;
+        }
+
+        &[data-size='s'] {
+            padding: 0 0.125rem;
+        }
+
+        &[data-size='s'][data-platform='web'] {
+            padding: 0 0.25rem;
+        }
+    }
+
+    &[data-size='s'] {
+        height: 1.25rem;
+        min-width: 1.25rem;
+
+        &[data-platform='ios'],
+        &[data-platform='android'] {
+            font: var(--tui-font-text-xs);
+            font-weight: bold;
+            height: 1rem;
+            min-width: 1rem;
+        }
+    }
+
+    &[data-size='m'] {
+        height: 1.25rem;
+        min-width: 1.25rem;
+    }
+
+    &[data-size='l'] {
+        height: var(--tui-height-xs);
+        min-width: var(--tui-height-xs);
+
+        &[data-platform='ios'],
+        &[data-platform='android'] {
+            height: 1.5rem;
+            min-width: 1.5rem;
+        }
+    }
+
+    &[data-size='xl'] {
+        height: var(--tui-height-s);
+        min-width: var(--tui-height-s);
+
+        &[data-platform='ios'],
+        &[data-platform='android'] {
+            height: 1.75rem;
+            min-width: 1.75rem;
+        }
+
+        &[data-platform='web'] {
+            font: var(--tui-font-text-m);
+        }
+    }
+
+    &[data-platform='ios'],
+    &[data-platform='android'] {
+        font-weight: bold;
+    }
+}
+
+.t-text {
+    white-space: nowrap;
+    padding: 0 0.125rem;
+    overflow: hidden;
+
+    &:empty {
+        display: none;
+    }
+
+    :host[data-size='xl'][data-platform='web'] & {
+        padding: 0 0.375rem;
+    }
+
+    :host[data-size='xl'] & {
+        padding: 0 0.25rem;
+    }
+
+    :host[data-size='l'] & {
+        padding: 0 0.25rem;
+    }
+}
+
+.t-icon {
+    display: none;
+    color: var(--left-content-color);
+
+    &:not(:empty) {
+        display: flex;
+        width: 1rem;
+        height: 1rem;
+        align-items: center;
+        justify-content: center;
+
+        &:before {
+            content: none;
+        }
+
+        :host[data-size='m'] &,
+        :host[data-size='s'][data-platform='web'] & {
+            width: 0.75rem;
+            transform: scale(0.75);
+        }
+
+        :host[data-size='s'] & {
+            width: 0.625rem;
+            transform: scale(0.625);
+        }
+
+        :host[data-size='s'] &:not(._icon-only) {
+            margin-left: 0.0625rem;
+        }
+    }
+
+    &:before {
+        content: '';
+        display: block;
+        background: currentColor;
+        margin: 0 0.125rem 0 0.25rem;
+        width: 0.25rem;
+        height: 0.25rem;
+        border-radius: 100%;
+    }
+
+    :host[data-appearance='error'] &,
+    :host[data-appearance='success'] &,
+    :host[data-appearance='warning'] &,
+    :host[data-appearance='info'] &,
+    :host[data-appearance='neutral'] & {
+        &:empty {
+            display: block;
+        }
+    }
+
+    :host[data-size='l'] &:before {
+        width: 0.375rem;
+        height: 0.375rem;
+    }
+
+    :host[data-size='xl'] &:before {
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+}
+
+.t-image {
+    display: none;
+
+    :host::ng-deep & img {
+        width: 100%;
+        height: 100%;
+    }
+
+    &:not(:empty) {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin: 0 -0.5rem;
+
+        & ~ .t-text {
+            margin-left: 0.5rem;
+        }
+
+        & ~ .t-icon {
+            display: none;
+        }
+
+        :host[data-size='xl'] & {
+            height: 1.75rem;
+            width: 1.75rem;
+        }
+
+        :host[data-size='l'] & {
+            height: 1.5rem;
+            width: 1.5rem;
+        }
+
+        :host[data-size='m'] & {
+            height: 1.25rem;
+            width: 1.25rem;
+        }
+
+        :host[data-size='xl'][data-platform='web'] & {
+            width: 2rem;
+            height: 2rem;
+        }
+
+        :host[data-size='s'][data-platform='web'] & {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+    }
+}
diff --git a/projects/experimental/components/badge/badge.template.html b/projects/experimental/components/badge/badge.template.html
new file mode 100644
index 000000000000..b8c1a118bd33
--- /dev/null
+++ b/projects/experimental/components/badge/badge.template.html
@@ -0,0 +1,16 @@
+<div class="t-image">
+    <ng-content select="img"></ng-content>
+</div>
+<div
+    class="t-icon"
+    [class._icon-only]="!text.innerHTML.trim()"
+>
+    <ng-content select="tui-svg"></ng-content>
+</div>
+
+<span
+    #text
+    class="t-text"
+>
+    <ng-content></ng-content>
+</span>
diff --git a/projects/experimental/components/badge/index.ts b/projects/experimental/components/badge/index.ts
new file mode 100644
index 000000000000..e25dffe4b70a
--- /dev/null
+++ b/projects/experimental/components/badge/index.ts
@@ -0,0 +1,2 @@
+export * from './badge.component';
+export * from './badge.module';
diff --git a/projects/experimental/components/badge/ng-package.json b/projects/experimental/components/badge/ng-package.json
new file mode 100644
index 000000000000..bab5ebcdb74a
--- /dev/null
+++ b/projects/experimental/components/badge/ng-package.json
@@ -0,0 +1,8 @@
+{
+    "lib": {
+        "entryFile": "index.ts",
+        "styleIncludePaths": [
+            "../../../core/styles"
+        ]
+    }
+}
diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts
index 3b5b3891f4d9..c4020863924a 100644
--- a/projects/experimental/components/index.ts
+++ b/projects/experimental/components/index.ts
@@ -1,2 +1,3 @@
 export * from '@taiga-ui/experimental/components/avatar';
 export * from '@taiga-ui/experimental/components/avatar-stack';
+export * from '@taiga-ui/experimental/components/badge';