diff --git a/src/lib/components/confirm-dialog/confirm-dialog.component.ts b/src/lib/components/confirm-dialog/confirm-dialog.component.ts
new file mode 100644
index 0000000..cdb4993
--- /dev/null
+++ b/src/lib/components/confirm-dialog/confirm-dialog.component.ts
@@ -0,0 +1,87 @@
+import { Component, Input, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { Button } from 'primeng/button';
+import { PrimeTemplate } from 'primeng/api';
+
+export type ConfirmDialogSize = 'sm' | 'default' | 'lg' | 'xlg';
+export type ConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'danger' | 'default';
+
+@Component({
+  selector: 'confirm-dialog',
+  host: { style: 'display: contents' },
+  standalone: true,
+  imports: [ConfirmDialog, Button, PrimeTemplate, NgTemplateOutlet],
+  template: `
+    <p-confirmDialog [key]="key" [styleClass]="computedClass" appendTo="body">
+      <ng-template pTemplate="headless" let-message let-onAccept="onAccept" let-onReject="onReject">
+        @if (headerTemplate) {
+          <ng-container [ngTemplateOutlet]="headerTemplate"
+            [ngTemplateOutletContext]="{ $implicit: message, onAccept, onReject }">
+          </ng-container>
+        } @else {
+          <div class="p-dialog-header">
+            <div class="p-dialog-title">
+              <i [class]="message.icon"></i>
+              <span>{{ message.header }}</span>
+            </div>
+            <button
+              class="p-button p-component p-button-icon-only p-button-rounded p-button-text p-dialog-close-button"
+              type="button"
+              (click)="onReject()"
+            >
+              <span class="p-button-icon ti ti-x"></span>
+            </button>
+          </div>
+        }
+        <div class="p-dialog-content">
+          <p>{{ message.message }}</p>
+        </div>
+        @if (footerTemplate) {
+          <ng-container [ngTemplateOutlet]="footerTemplate"
+            [ngTemplateOutletContext]="{ $implicit: message, onAccept, onReject }">
+          </ng-container>
+        } @else {
+          <div class="p-dialog-footer">
+            <p-button
+              [label]="message.rejectLabel"
+              variant="text"
+              (onClick)="onReject()"
+            ></p-button>
+            <p-button
+              [label]="message.acceptLabel"
+              [severity]="message.acceptButtonProps?.severity"
+              (onClick)="onAccept()"
+            ></p-button>
+          </div>
+        }
+      </ng-template>
+    </p-confirmDialog>
+  `,
+})
+export class ConfirmDialogComponent {
+  @Input() key = '';
+  @Input() size: ConfirmDialogSize = 'default';
+  @Input() severity: ConfirmDialogSeverity = 'default';
+  @Input() headerTemplate: TemplateRef<any> | null = null;
+  @Input() footerTemplate: TemplateRef<any> | null = null;
+
+  get computedClass(): string {
+    const classes: string[] = [];
+    if (this.size === 'sm') classes.push('p-confirmdialog-sm');
+    else if (this.size === 'lg') classes.push('p-confirmdialog-lg');
+    else if (this.size === 'xlg') classes.push('p-confirmdialog-xlg');
+
+    const severityMap: Record<ConfirmDialogSeverity, string> = {
+      success: 'p-confirm-dialog-accept',
+      info: 'p-confirm-dialog-info',
+      warn: 'p-confirm-dialog-warn',
+      help: 'p-confirm-dialog-help',
+      danger: 'p-confirm-dialog-error',
+      default: '',
+    };
+    if (severityMap[this.severity]) classes.push(severityMap[this.severity]);
+
+    return classes.join(' ');
+  }
+}
diff --git a/src/lib/components/confirm-dialog/confirm-dialog.service.ts b/src/lib/components/confirm-dialog/confirm-dialog.service.ts
new file mode 100644
index 0000000..1031258
--- /dev/null
+++ b/src/lib/components/confirm-dialog/confirm-dialog.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Confirmation, ConfirmationService } from 'primeng/api';
+
+export type ConfirmDialogOptions = Pick<
+  Confirmation,
+  'key' | 'message' | 'header' | 'icon' | 'acceptLabel' | 'rejectLabel' | 'accept' | 'reject' | 'acceptButtonProps'
+>;
+
+@Injectable()
+export class ConfirmDialogService {
+  constructor(private readonly confirmationService: ConfirmationService) {}
+
+  confirm(options: ConfirmDialogOptions): void {
+    this.confirmationService.confirm(options);
+  }
+}
diff --git a/src/prime-preset/tokens/components/confirm-dialog.ts b/src/prime-preset/tokens/components/confirm-dialog.ts
new file mode 100644
index 0000000..bc9e3ff
--- /dev/null
+++ b/src/prime-preset/tokens/components/confirm-dialog.ts
@@ -0,0 +1,59 @@
+export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): string => `
+  /* Иконка в заголовке */
+  .p-confirmdialog .p-dialog-title {
+    display: flex;
+    align-items: center;
+    gap: ${dt('dialog.header.gap')};
+  }
+
+  .p-confirmdialog .p-dialog-title i {
+    width: ${dt('confirmdialog.icon.size')};
+    height: ${dt('confirmdialog.icon.size')};
+    font-size: ${dt('confirmdialog.icon.size')};
+    flex-shrink: 0;
+  }
+
+  /* Размеры */
+  .p-confirmdialog.p-dialog {
+    width: ${dt('overlay.width')};
+  }
+
+  .p-confirmdialog-sm.p-dialog {
+    width: ${dt('sizing.80x')};
+  }
+
+  .p-confirmdialog-lg.p-dialog {
+    width: ${dt('sizing.120x')};
+  }
+
+  .p-confirmdialog-xlg.p-dialog {
+    width: ${dt('sizing.128x')};
+  }
+
+  /* Цвета иконок по severity */
+  .p-confirmdialog[data-pc-severity="success"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-accept .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.success')};
+  }
+
+  .p-confirmdialog[data-pc-severity="info"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-info .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.info')};
+  }
+
+  .p-confirmdialog[data-pc-severity="warn"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-warn .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.warn')};
+  }
+
+  .p-confirmdialog[data-pc-severity="help"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-help .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.help')};
+  }
+
+  .p-confirmdialog[data-pc-severity="danger"] .p-dialog-title i,
+  .p-confirmdialog[data-pc-severity="error"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-error .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.danger')};
+  }
+`;
diff --git a/src/prime-preset/tokens/components/dialog.ts b/src/prime-preset/tokens/components/dialog.ts
index c157e61..7426012 100644
--- a/src/prime-preset/tokens/components/dialog.ts
+++ b/src/prime-preset/tokens/components/dialog.ts
@@ -36,18 +36,18 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string =>
   }
 
   .p-dialog {
-    width: ${dt('sizing.80x')};
+    width: ${dt('overlay.width')};
   }
 
   .p-dialog.p-component.p-dialog-sm {
-    width: ${dt('overlay.sm.width')};
+    width: ${dt('sizing.80x')};
   }
 
   .p-dialog.p-component.p-dialog-lg {
-    width: ${dt('overlay.lg.width')};
+    width: ${dt('sizing.120x')};
   }
 
   .p-dialog.p-component.p-dialog-xlg {
-    width: ${dt('overlay.xlg.width')};
+    width: ${dt('sizing.128x')};
   }
 `;
diff --git a/src/stories/components/confirm-dialog/confirm-dialog.stories.ts b/src/stories/components/confirm-dialog/confirm-dialog.stories.ts
new file mode 100644
index 0000000..91f44e0
--- /dev/null
+++ b/src/stories/components/confirm-dialog/confirm-dialog.stories.ts
@@ -0,0 +1,250 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { ConfirmDialogComponent } from '../../../lib/components/confirm-dialog/confirm-dialog.component';
+import { ConfirmDialogDefaultComponent } from './examples/confirm-dialog-default.component';
+import { ConfirmDialogSeveritiesComponent } from './examples/confirm-dialog-severities.component';
+import { ConfirmDialogSizesComponent } from './examples/confirm-dialog-sizes.component';
+
+const meta: Meta<ConfirmDialogComponent> = {
+  title: 'Components/Overlay/ConfirmDialog',
+  component: ConfirmDialogComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Компонент для подтверждения действий пользователя. Требует подключения \`ConfirmationService\` и \`ConfirmDialogService\`.
+
+\`\`\`typescript
+import { ConfirmDialogComponent, ConfirmDialogService } from '@cdek-it/angular-ui-kit';
+import { ConfirmationService } from 'primeng/api';
+\`\`\``,
+      },
+    },
+    designTokens: { prefix: '--p-confirmdialog' },
+  },
+  argTypes: {
+    key: {
+      control: 'text',
+      description: 'Идентификатор группы для адресной отправки сообщений.',
+      table: {
+        category: 'Props',
+        type: { summary: 'string' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg', 'xlg'],
+      description: 'Размер диалога',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'default' },
+        type: { summary: "'sm' | 'default' | 'lg' | 'xlg'" },
+      },
+    },
+    severity: {
+      control: 'select',
+      options: ['default', 'success', 'info', 'warn', 'help', 'danger'],
+      description: 'Цветовая схема иконки в заголовке',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'default' },
+        type: { summary: "'default' | 'success' | 'info' | 'warn' | 'help' | 'danger'" },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ConfirmDialogComponent>;
+
+// ── Default ───────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  name: 'ConfirmDialog',
+  decorators: [moduleMetadata({ imports: [ConfirmDialogDefaultComponent] })],
+  render: () => ({ template: `<app-confirm-dialog-default></app-confirm-dialog-default>` }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый пример диалога подтверждения.',
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmDialogComponent, ConfirmDialogService } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-confirm-dialog-default',
+  standalone: true,
+  imports: [ConfirmDialogComponent, Button],
+  providers: [ConfirmationService, ConfirmDialogService],
+  template: \`
+    <p-button label="Показать диалог" severity="contrast" (onClick)="showConfirm()"></p-button>
+    <confirm-dialog key="cd-default"></confirm-dialog>
+  \`,
+})
+export class ConfirmDialogDefaultComponent {
+  constructor(private confirmDialogService: ConfirmDialogService) {}
+
+  showConfirm(): void {
+    this.confirmDialogService.confirm({
+      key: 'cd-default',
+      message: 'Вы уверены, что хотите продолжить?',
+      header: 'Подтверждение',
+      icon: 'ti ti-alert-triangle',
+      acceptLabel: 'Да',
+      rejectLabel: 'Нет',
+      accept: () => {},
+      reject: () => {},
+    });
+  }
+}
+        `,
+      },
+    },
+  },
+};
+
+// ── Severities ────────────────────────────────────────────────────────────────
+
+export const Severities: Story = {
+  name: 'Severities',
+  decorators: [moduleMetadata({ imports: [ConfirmDialogSeveritiesComponent] })],
+  render: () => ({ template: `<app-confirm-dialog-severities></app-confirm-dialog-severities>` }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Варианты диалога с различными уровнями важности: success, info, warn, help, danger.',
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmDialogComponent, ConfirmDialogService } from '@cdek-it/angular-ui-kit';
+
+const SEVERITIES = [
+  { type: 'success', buttonSeverity: 'success', icon: 'ti ti-circle-check', label: 'Успех', header: 'Успех', message: 'Операция выполнена успешно.', acceptLabel: 'OK' },
+  { type: 'info', buttonSeverity: 'info', icon: 'ti ti-info-circle', label: 'Информация', header: 'Информация', message: 'Это информационное сообщение.', acceptLabel: 'Понятно' },
+  { type: 'warn', buttonSeverity: 'warn', icon: 'ti ti-alert-triangle', label: 'Предупреждение', header: 'Предупреждение', message: 'Внимание! Это действие может иметь последствия.', acceptLabel: 'Продолжить' },
+  { type: 'help', buttonSeverity: 'help', icon: 'ti ti-help-circle', label: 'Справка', header: 'Справка', message: 'Нужна помощь с этим действием?', acceptLabel: 'Да' },
+  { type: 'danger', buttonSeverity: 'danger', icon: 'ti ti-circle-x', label: 'Удаление', header: 'Подтверждение', message: 'Это действие нельзя отменить. Продолжить?', acceptLabel: 'Удалить' },
+];
+
+@Component({
+  selector: 'app-confirm-dialog-severities',
+  standalone: true,
+  imports: [ConfirmDialogComponent, Button],
+  providers: [ConfirmationService, ConfirmDialogService],
+  template: \`
+    <confirm-dialog key="cd-severity-success" severity="success"></confirm-dialog>
+    <confirm-dialog key="cd-severity-info" severity="info"></confirm-dialog>
+    <confirm-dialog key="cd-severity-warn" severity="warn"></confirm-dialog>
+    <confirm-dialog key="cd-severity-help" severity="help"></confirm-dialog>
+    <confirm-dialog key="cd-severity-danger" severity="danger"></confirm-dialog>
+
+    <div class="flex flex-wrap gap-2">
+      @for (severity of severities; track severity.type) {
+        <p-button
+          [label]="'Показать: ' + severity.label"
+          [severity]="severity.buttonSeverity"
+          variant="outlined"
+          (onClick)="showConfirm(severity)"
+        ></p-button>
+      }
+    </div>
+  \`,
+})
+export class ConfirmDialogSeveritiesComponent {
+  severities = SEVERITIES;
+  constructor(private confirmDialogService: ConfirmDialogService) {}
+
+  showConfirm(severity: any): void {
+    this.confirmDialogService.confirm({
+      key: 'cd-severity-' + severity.type,
+      message: severity.message,
+      header: severity.header,
+      icon: severity.icon,
+      acceptLabel: severity.acceptLabel,
+      rejectLabel: 'Нет',
+      acceptButtonProps: { severity: severity.buttonSeverity },
+      accept: () => {},
+      reject: () => {},
+    });
+  }
+}
+        `,
+      },
+    },
+  },
+};
+
+// ── Sizes ─────────────────────────────────────────────────────────────────────
+
+export const Sizes: Story = {
+  name: 'Sizes',
+  decorators: [moduleMetadata({ imports: [ConfirmDialogSizesComponent] })],
+  render: () => ({ template: `<app-confirm-dialog-sizes></app-confirm-dialog-sizes>` }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Доступные размеры диалога: sm, base, lg, xlg.',
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmDialogComponent, ConfirmDialogService } from '@cdek-it/angular-ui-kit';
+
+const SIZES = [
+  { key: 'sm', label: 'Small' },
+  { key: 'default', label: 'Base' },
+  { key: 'lg', label: 'Large' },
+  { key: 'xlg', label: 'Extra Large' },
+];
+
+@Component({
+  selector: 'app-confirm-dialog-sizes',
+  standalone: true,
+  imports: [ConfirmDialogComponent, Button],
+  providers: [ConfirmationService, ConfirmDialogService],
+  template: \`
+    <confirm-dialog key="cd-size-sm" size="sm"></confirm-dialog>
+    <confirm-dialog key="cd-size-default"></confirm-dialog>
+    <confirm-dialog key="cd-size-lg" size="lg"></confirm-dialog>
+    <confirm-dialog key="cd-size-xlg" size="xlg"></confirm-dialog>
+
+    <div class="flex flex-wrap gap-2">
+      @for (size of sizes; track size.key) {
+        <p-button [label]="size.label" severity="contrast" (onClick)="showConfirm(size)"></p-button>
+      }
+    </div>
+  \`,
+})
+export class ConfirmDialogSizesComponent {
+  sizes = SIZES;
+  constructor(private confirmDialogService: ConfirmDialogService) {}
+
+  showConfirm(size: any): void {
+    this.confirmDialogService.confirm({
+      key: 'cd-size-' + size.key,
+      message: 'Это диалог размера ' + size.label,
+      header: 'Подтверждение',
+      icon: 'ti ti-alert-triangle',
+      acceptLabel: 'Да',
+      rejectLabel: 'Нет',
+      accept: () => {},
+      reject: () => {},
+    });
+  }
+}
+        `,
+      },
+    },
+  },
+};
diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts
new file mode 100644
index 0000000..8b7118c
--- /dev/null
+++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts
@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmDialogComponent } from '../../../../lib/components/confirm-dialog/confirm-dialog.component';
+import { ConfirmDialogService } from '../../../../lib/components/confirm-dialog/confirm-dialog.service';
+
+const template = `
+<div class="bg-surface-ground">
+  <p-button label="Показать диалог" severity="contrast" (onClick)="showConfirm()"></p-button>
+
+  <confirm-dialog key="cd-default"></confirm-dialog>
+</div>
+`;
+
+@Component({
+  selector: 'app-confirm-dialog-default',
+  standalone: true,
+  imports: [ConfirmDialogComponent, Button],
+  providers: [ConfirmationService, ConfirmDialogService],
+  template,
+})
+export class ConfirmDialogDefaultComponent {
+  constructor(private confirmDialogService: ConfirmDialogService) {}
+
+  showConfirm(): void {
+    this.confirmDialogService.confirm({
+      key: 'cd-default',
+      message: 'Вы уверены, что хотите продолжить?',
+      header: 'Подтверждение',
+      icon: 'ti ti-alert-triangle',
+      acceptLabel: 'Да',
+      rejectLabel: 'Нет',
+      accept: () => {},
+      reject: () => {},
+    });
+  }
+}
diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts
new file mode 100644
index 0000000..41cdadc
--- /dev/null
+++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts
@@ -0,0 +1,111 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmDialogComponent } from '../../../../lib/components/confirm-dialog/confirm-dialog.component';
+import { ConfirmDialogService } from '../../../../lib/components/confirm-dialog/confirm-dialog.service';
+
+interface SeverityItem {
+  type: 'success' | 'info' | 'warn' | 'help' | 'danger';
+  buttonSeverity: 'success' | 'info' | 'warn' | 'help' | 'danger';
+  icon: string;
+  label: string;
+  header: string;
+  message: string;
+  acceptLabel: string;
+}
+
+const SEVERITIES: SeverityItem[] = [
+  {
+    type: 'success',
+    buttonSeverity: 'success',
+    icon: 'ti ti-circle-check',
+    label: 'Успех',
+    header: 'Успех',
+    message: 'Операция выполнена успешно.',
+    acceptLabel: 'OK',
+  },
+  {
+    type: 'info',
+    buttonSeverity: 'info',
+    icon: 'ti ti-info-circle',
+    label: 'Информация',
+    header: 'Информация',
+    message: 'Это информационное сообщение.',
+    acceptLabel: 'Понятно',
+  },
+  {
+    type: 'warn',
+    buttonSeverity: 'warn',
+    icon: 'ti ti-alert-triangle',
+    label: 'Предупреждение',
+    header: 'Предупреждение',
+    message: 'Внимание! Это действие может иметь последствия.',
+    acceptLabel: 'Продолжить',
+  },
+  {
+    type: 'help',
+    buttonSeverity: 'help',
+    icon: 'ti ti-help-circle',
+    label: 'Справка',
+    header: 'Справка',
+    message: 'Нужна помощь с этим действием?',
+    acceptLabel: 'Да',
+  },
+  {
+    type: 'danger',
+    buttonSeverity: 'danger',
+    icon: 'ti ti-circle-x',
+    label: 'Удаление',
+    header: 'Подтверждение',
+    message: 'Это действие нельзя отменить. Продолжить?',
+    acceptLabel: 'Удалить',
+  },
+];
+
+const template = `
+<div class="bg-surface-ground">
+  <confirm-dialog key="cd-severity-success" severity="success"></confirm-dialog>
+  <confirm-dialog key="cd-severity-info" severity="info"></confirm-dialog>
+  <confirm-dialog key="cd-severity-warn" severity="warn"></confirm-dialog>
+  <confirm-dialog key="cd-severity-help" severity="help"></confirm-dialog>
+  <confirm-dialog key="cd-severity-danger" severity="danger"></confirm-dialog>
+
+  <div class="flex flex-wrap gap-2">
+    @for (severity of severities; track severity.type) {
+      <p-button
+        [label]="'Показать: ' + severity.label"
+        [severity]="severity.buttonSeverity"
+        variant="outlined"
+        (onClick)="showConfirm(severity)"
+      ></p-button>
+    }
+  </div>
+</div>
+`;
+
+@Component({
+  selector: 'app-confirm-dialog-severities',
+  standalone: true,
+  imports: [ConfirmDialogComponent, Button],
+  providers: [ConfirmationService, ConfirmDialogService],
+  template,
+})
+export class ConfirmDialogSeveritiesComponent {
+  severities = SEVERITIES;
+
+  constructor(private confirmDialogService: ConfirmDialogService) {}
+
+  showConfirm(severity: SeverityItem): void {
+    this.confirmDialogService.confirm({
+      key: 'cd-severity-' + severity.type,
+      message: severity.message,
+      header: severity.header,
+      icon: severity.icon,
+      acceptLabel: severity.acceptLabel,
+      rejectLabel: 'Нет',
+      acceptButtonProps: { severity: severity.buttonSeverity },
+      accept: () => {},
+      reject: () => {},
+    });
+  }
+}
diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts
new file mode 100644
index 0000000..fbfb90d
--- /dev/null
+++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts
@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
+import {
+  ConfirmDialogComponent,
+  ConfirmDialogSize,
+} from '../../../../lib/components/confirm-dialog/confirm-dialog.component';
+import { ConfirmDialogService } from '../../../../lib/components/confirm-dialog/confirm-dialog.service';
+
+interface SizeItem {
+  key: ConfirmDialogSize;
+  label: string;
+}
+
+const SIZES: SizeItem[] = [
+  { key: 'sm', label: 'Small' },
+  { key: 'default', label: 'Base' },
+  { key: 'lg', label: 'Large' },
+  { key: 'xlg', label: 'Extra Large' },
+];
+
+const template = `
+<div class="bg-surface-ground">
+  <confirm-dialog key="cd-size-sm" size="sm"></confirm-dialog>
+  <confirm-dialog key="cd-size-default"></confirm-dialog>
+  <confirm-dialog key="cd-size-lg" size="lg"></confirm-dialog>
+  <confirm-dialog key="cd-size-xlg" size="xlg"></confirm-dialog>
+
+  <div class="flex flex-wrap gap-2">
+    @for (size of sizes; track size.key) {
+      <p-button
+        [label]="size.label"
+        severity="contrast"
+        (onClick)="showConfirm(size)"
+      ></p-button>
+    }
+  </div>
+</div>
+`;
+
+@Component({
+  selector: 'app-confirm-dialog-sizes',
+  standalone: true,
+  imports: [ConfirmDialogComponent, Button],
+  providers: [ConfirmationService, ConfirmDialogService],
+  template,
+})
+export class ConfirmDialogSizesComponent {
+  sizes = SIZES;
+
+  constructor(private confirmDialogService: ConfirmDialogService) {}
+
+  showConfirm(size: SizeItem): void {
+    this.confirmDialogService.confirm({
+      key: 'cd-size-' + size.key,
+      message: 'Это диалог размера ' + size.label,
+      header: 'Подтверждение',
+      icon: 'ti ti-alert-triangle',
+      acceptLabel: 'Да',
+      rejectLabel: 'Нет',
+      accept: () => {},
+      reject: () => {},
+    });
+  }
+}