diff --git a/docs/components-api/avatar.md b/docs/components-api/avatar.md
index ea2ff80b..6c21920d 100644
--- a/docs/components-api/avatar.md
+++ b/docs/components-api/avatar.md
@@ -2,13 +2,28 @@
 
 # ExtraAvatar
 
+> ✅ **Реализован**: `ExtraAvatarComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации.
+
 Представление пользователя.
 
-| Свойство | Описание                    | Типизация                 |
-| -------- | --------------------------- | ------------------------- |
-| `size`   | размер аватара              | `base \| large \| xlarge` |
-| `shape`  | форма                       | `square \| circle`        |
-| `image`  | изображение                 | `string`                  |
-| `label`  | текст/инициалы              | `string`                  |
-| `icon`   | класс иконки tabler icon    | `string`                  |
-| `badge`  | отображать значок (`Badge`) | `string`                  |
+| Свойство   | Описание                            | Типизация                                         |
+| ---------- | ----------------------------------- | ------------------------------------------------- |
+| `size`     | размер аватара                      | `base \| large \| xlarge`                         |
+| `shape`    | форма                               | `square \| circle`                                |
+| `image`    | изображение                         | `string`                                          |
+| `label`    | текст/инициалы                      | `string`                                          |
+| `icon`     | класс иконки tabler icon            | `string`                                          |
+| `badge`    | отображать значок (`Badge`)         | `string`                                          |
+| `severity` | цветовая схема значка (при `badge`) | `primary \| success \| info \| warning \| danger` |
+
+# ExtraAvatarGroup
+
+Группа аватаров с перекрытием (стек). Дочерние `ExtraAvatar` передаются как есть — своих свойств у группы нет.
+
+```html
+<extra-avatar-group>
+  <extra-avatar image="..." shape="circle"></extra-avatar>
+  <extra-avatar image="..." shape="circle"></extra-avatar>
+  <extra-avatar label="+2" shape="circle"></extra-avatar>
+</extra-avatar-group>
+```
diff --git a/src/lib/components/avatar/avatar.component.ts b/src/lib/components/avatar/avatar.component.ts
index e7810ddb..04872a28 100644
--- a/src/lib/components/avatar/avatar.component.ts
+++ b/src/lib/components/avatar/avatar.component.ts
@@ -1,23 +1,40 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { Avatar } from 'primeng/avatar';
 import { AvatarGroup } from 'primeng/avatargroup';
+import { OverlayBadge } from 'primeng/overlaybadge';
+import { ExtraBadgeSeverity } from '@cdek-it/angular-ui-kit/components/badge';
 
 export type ExtraAvatarSize = 'base' | 'large' | 'xlarge';
 export type ExtraAvatarShape = 'square' | 'circle';
 
+type PrimeOverlayBadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast' | null | undefined;
+
 @Component({
   selector: 'extra-avatar',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [Avatar],
+  imports: [Avatar, OverlayBadge, NgTemplateOutlet],
   template: `
-    <p-avatar
-      [label]="label || undefined"
-      [icon]="icon || undefined"
-      [image]="image || undefined"
-      [size]="primeSize"
-      [shape]="shape"
-    ></p-avatar>
+    @if (badge) {
+      <!-- size бейджу не передаём: по макету значок одного размера на всех размерах аватара,
+           а OverlayBadge.size к тому же deprecated и внутрь p-badge не прокидывается. -->
+      <p-overlay-badge [value]="badge" [severity]="primeSeverity">
+        <ng-container [ngTemplateOutlet]="avatarTpl" />
+      </p-overlay-badge>
+    } @else {
+      <ng-container [ngTemplateOutlet]="avatarTpl" />
+    }
+
+    <ng-template #avatarTpl>
+      <p-avatar
+        [label]="label || undefined"
+        [icon]="icon || undefined"
+        [image]="image || undefined"
+        [size]="primeSize"
+        [shape]="shape"
+      ></p-avatar>
+    </ng-template>
   `
 })
 export class ExtraAvatarComponent {
@@ -26,6 +43,8 @@ export class ExtraAvatarComponent {
   @Input() image = '';
   @Input() size: ExtraAvatarSize = 'base';
   @Input() shape: ExtraAvatarShape = 'square';
+  @Input() badge: string | undefined;
+  @Input() severity: ExtraBadgeSeverity = 'primary';
 
   @HostBinding('class') get hostClass(): string {
     const classes = ['ui-avatar'];
@@ -37,6 +56,12 @@ export class ExtraAvatarComponent {
   get primeSize(): 'large' | 'xlarge' | undefined {
     return this.size === 'base' ? undefined : this.size;
   }
+
+  get primeSeverity(): PrimeOverlayBadgeSeverity {
+    if (this.severity === 'primary') return null;
+    if (this.severity === 'warning') return 'warn';
+    return this.severity as Exclude<PrimeOverlayBadgeSeverity, null | undefined | 'warn'>;
+  }
 }
 
 @Component({
diff --git a/src/lib/components/avatar/avatar.figma.md b/src/lib/components/avatar/avatar.figma.md
index 696813cf..72d9a247 100644
--- a/src/lib/components/avatar/avatar.figma.md
+++ b/src/lib/components/avatar/avatar.figma.md
@@ -10,26 +10,26 @@ figma:
   componentKey: 'fe504adcf02d8f8922f04f6ccb8bf3777ad701d9'
   name: '<Avatar>'
 status: stable
-updated: '2026-06-22'
+updated: '2026-09-29'
 ---
 
 ## Overview
 
-`ExtraAvatar` — компонент для отображения пользователя или сущности. Поддерживает три способа представления содержимого: текстовую метку, иконку или изображение. Оборачивает PrimeNG `p-avatar` и расширяет его собственными размерами и формами.
+`ExtraAvatar` — компонент для отображения пользователя или сущности. Поддерживает три способа представления содержимого: текстовую метку, иконку или изображение. Оборачивает PrimeNG `p-avatar` и расширяет его собственными размерами, формами и встроенным значком (`badge`, через PrimeNG `p-overlay-badge`).
 
 Компонент соответствует Figma-компоненту `<Avatar>` (nodeId `36:1365`). Figma-свойство `type` (`image | icon | label`) не маппируется в отдельный инпут — способ представления выбирается тем, какой из инпутов `image`, `icon` или `label` задан (см. раздел Props mapping).
 
 ## Props mapping
 
-| Свойство | Тип | По умолчанию | Описание |
-|----------|-----|--------------|---------|
-| `label` | `string` | `''` | Текстовая метка внутри аватара — соответствует Figma-свойству `type=label` |
-| `icon` | `string` | `''` | CSS-класс иконки (например `'ti ti-user'`) — соответствует Figma-свойству `type=icon` и `change-icon` (INSTANCE_SWAP); доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
-| `image` | `string` | `''` | URL изображения — соответствует Figma-свойству `type=image` |
-| `size` | `'normal' \| 'large' \| 'xlarge'` | `'normal'` | Размер аватара — соответствует Figma-свойству `size` (Figma `base` → код `normal`) |
-| `shape` | `'square' \| 'circle'` | `'square'` | Форма аватара — соответствует Figma-свойству `shape` |
-
-Figma-свойство `show-badge` (BOOLEAN) не имеет отдельного инпута: бейдж навешивается снаружи через PrimeNG `p-overlay-badge`, оборачивающий `extra-avatar` (см. раздел Variants).
+| Свойство   | Тип                                                         | По умолчанию | Описание                                                                                                                                                                                |
+| ---------- | ----------------------------------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`    | `string`                                                    | `''`         | Текстовая метка внутри аватара — соответствует Figma-свойству `type=label`                                                                                                              |
+| `icon`     | `string`                                                    | `''`         | CSS-класс иконки (например `'ti ti-user'`) — соответствует Figma-свойству `type=icon` и `change-icon` (INSTANCE_SWAP); доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `image`    | `string`                                                    | `''`         | URL изображения — соответствует Figma-свойству `type=image`                                                                                                                             |
+| `size`     | `'base' \| 'large' \| 'xlarge'`                             | `'base'`     | Размер аватара — соответствует Figma-свойству `size`                                                                                                                                    |
+| `shape`    | `'square' \| 'circle'`                                      | `'square'`   | Форма аватара — соответствует Figma-свойству `shape`                                                                                                                                    |
+| `badge`    | `string \| undefined`                                       | `undefined`  | Текст/число значка — соответствует Figma-свойству `show-badge`; при задании оборачивает аватар в PrimeNG `p-overlay-badge`                                                              |
+| `severity` | `'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | `'primary'`  | Цветовая схема значка (при заданном `badge`) — та же шкала, что у [ExtraBadge](../badge/badge.figma.md)                                                                                 |
 
 ## Variants
 
@@ -72,23 +72,29 @@ Figma: size=large, shape=circle, type=label
 Figma: size=xlarge, shape=circle, type=image
 
 ```html
-<extra-avatar
-  image="/assets/images/avatar/avatar.png"
-  size="xlarge"
-  shape="circle"
-></extra-avatar>
+<extra-avatar image="/assets/images/avatar/avatar.png" size="xlarge" shape="circle"></extra-avatar>
 ```
 
 ### С бейджем (show-badge)
 
 Figma: size=xlarge, shape=square, type=label, show-badge=true
 
-Бейдж навешивается снаружи через `p-overlay-badge`; цветовая схема — токены [tokens.md](../../figma-code-connect/tokens.md).
+Компонент сам оборачивает себя в PrimeNG `p-overlay-badge`, когда задан `badge`.
+
+```html
+<extra-avatar label="U" size="xlarge" badge="4" severity="danger"></extra-avatar>
+```
+
+### Группа аватаров (ExtraAvatarGroup)
+
+Не описана отдельным Figma-компонентом, но является полезной композицией `<extra-avatar>` — стек аватаров с перекрытием.
 
 ```html
-<p-overlay-badge value="4" severity="danger">
-  <extra-avatar label="U" size="xlarge"></extra-avatar>
-</p-overlay-badge>
+<extra-avatar-group>
+  <extra-avatar image="/assets/images/avatar/avatar.png" shape="circle"></extra-avatar>
+  <extra-avatar image="/assets/images/avatar/avatar.png" shape="circle"></extra-avatar>
+  <extra-avatar label="+2" shape="circle"></extra-avatar>
+</extra-avatar-group>
 ```
 
 ## Slots
@@ -101,18 +107,21 @@ Figma: size=xlarge, shape=square, type=label, show-badge=true
 - [Токены](../../figma-code-connect/tokens.md) — цветовые токены бейджа и фона
 - [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
 - [ExtraTag](../tag/tag.figma.md) — близкий по назначению компонент-метка
+- [ExtraBadge](../badge/badge.figma.md) — самостоятельный компонент-значок (та же шкала `severity`)
 - [ExtraButton](../button/button.figma.md) — пример компонента с навешиваемым бейджем
 
 ## Do / Don't
 
 **Do:**
+
 - Задавайте ровно один из инпутов `label`, `icon` или `image` — он определяет Figma-свойство `type`
 - Для иконки используйте классы из справочника [icons.md](../../figma-code-connect/icons.md)
 - Для круглых аватаров с изображением задавайте `shape="circle"` — изображение обрежется по кругу
-- Бейдж навешивайте снаружи через `p-overlay-badge`, оборачивающий `extra-avatar`
+- Задавайте `badge` для значка поверх аватара — компонент сам оборачивает себя в `p-overlay-badge`, ничего оборачивать вручную не нужно
+- Используйте `<extra-avatar-group>` для стека перекрывающихся аватаров
 
 **Don't:**
+
 - Не задавайте одновременно `image` и `label` или `image` и `icon` — представление станет неоднозначным
 - Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
-- Не используйте `size="base"` — в коде базовый размер называется `normal` (Figma `base` ↔ код `normal`)
-- Не пытайтесь задать бейдж инпутом компонента — отдельного инпута нет, используйте `p-overlay-badge`
+- Не оборачивайте `<extra-avatar>` в `p-overlay-badge` вручную — используйте `badge`/`severity`, компонент сделает это сам
diff --git a/src/lib/providers/prime-preset/tokens/components/avatar.ts b/src/lib/providers/prime-preset/tokens/components/avatar.ts
index 377c72a8..5bcb9a2b 100644
--- a/src/lib/providers/prime-preset/tokens/components/avatar.ts
+++ b/src/lib/providers/prime-preset/tokens/components/avatar.ts
@@ -13,9 +13,17 @@ export const avatarCss = ({ dt }: { dt: (token: string) => string }): string =>
 
 .p-avatar.p-avatar-circle {
   border-radius: ${dt('avatar.extend.circle.borderRadius')};
+}
+
+/* Изображение — Fill блока: обрезаем по радиусу и для square, и для circle. */
+.p-avatar {
   overflow: hidden;
 }
 
+.p-avatar img {
+  object-fit: cover;
+}
+
 .p-overlaybadge.p-overlaybadge {
   width: fit-content;
 }
diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json
index cb9a6225..145b6270 100644
--- a/src/lib/providers/prime-preset/tokens/tokens.json
+++ b/src/lib/providers/prime-preset/tokens/tokens.json
@@ -1379,7 +1379,6 @@
     },
     "avatar": {
       "extend": {
-        "borderColor": "{color.border.neutral.strong}",
         "circle": {
           "borderRadius": "{dimension.borderRadius.max}"
         }
@@ -1390,7 +1389,7 @@
         "fontSize": "{fonts.fontSize.300}",
         "color": "{color.fg.on.brand.default}",
         "background": "{color.bg.brand.strong.default}",
-        "borderRadius": "{dimension.borderRadius.400}"
+        "borderRadius": "{dimension.borderRadius.350}"
       },
       "icon": {
         "size": "{dimension.size.450}"
diff --git a/src/stories/components/avatar/avatar.stories.ts b/src/stories/components/avatar/avatar.stories.ts
index d9a0f889..4446543b 100644
--- a/src/stories/components/avatar/avatar.stories.ts
+++ b/src/stories/components/avatar/avatar.stories.ts
@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { OverlayBadge } from 'primeng/overlaybadge';
 import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '../../../lib/components/avatar/avatar.component';
 
 const meta: Meta<ExtraAvatarComponent> = {
@@ -8,13 +7,15 @@ const meta: Meta<ExtraAvatarComponent> = {
   tags: ['autodocs'],
   decorators: [
     moduleMetadata({
-      imports: [ExtraAvatarComponent, ExtraAvatarGroupComponent, OverlayBadge]
+      imports: [ExtraAvatarComponent, ExtraAvatarGroupComponent]
     })
   ],
   parameters: {
     docs: {
       description: {
-        component: `Аватар представляет пользователя или сущность. Может содержать текст, иконку или изображение. [PrimeNG Avatar](https://primeng.org/avatar).
+        component: `Аватар представляет пользователя или сущность. Может содержать текст, иконку или изображение, а также значок (\`badge\`).
+
+Реализован по спецификации \`docs/components-api/avatar.md\`.
 
 \`\`\`typescript
 import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '@cdek-it/angular-ui-kit';
@@ -24,12 +25,12 @@ import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '@cdek-it/angula
     designTokens: { prefix: '--p-avatar' }
   },
   argTypes: {
-    // ── Props ────────────────────────────────────────────────
+    // ── Свойства ─────────────────────────────────────────────
     label: {
       control: 'text',
       description: 'Текст внутри аватара',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: "''" },
         type: { summary: 'string' }
       }
@@ -38,7 +39,7 @@ import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '@cdek-it/angula
       control: 'text',
       description: 'CSS-класс иконки (например: ti ti-user)',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: "''" },
         type: { summary: 'string' }
       }
@@ -47,7 +48,7 @@ import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '@cdek-it/angula
       control: 'text',
       description: 'URL изображения',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: "''" },
         type: { summary: 'string' }
       }
@@ -57,7 +58,7 @@ import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '@cdek-it/angula
       options: ['base', 'large', 'xlarge'],
       description: 'Размер аватара',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'base' },
         type: { summary: "'base' | 'large' | 'xlarge'" }
       }
@@ -67,11 +68,34 @@ import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '@cdek-it/angula
       options: ['square', 'circle'],
       description: 'Форма аватара',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'square' },
         type: { summary: "'square' | 'circle'" }
       }
-    }
+    },
+    badge: {
+      control: 'text',
+      description: 'Текст/число значка; при задании аватар оборачивается в p-overlay-badge',
+      table: {
+        category: 'Свойства',
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'string | undefined' }
+      }
+    },
+    severity: {
+      control: 'select',
+      options: ['primary', 'success', 'info', 'warning', 'danger'],
+      description: 'Цветовая схема значка (при заданном badge)',
+      table: {
+        category: 'Свойства',
+        defaultValue: { summary: "'primary'" },
+        type: { summary: "'primary' | 'success' | 'info' | 'warning' | 'danger'" }
+      }
+    },
+    // Hidden computed props
+    hostClass: { table: { disable: true } },
+    primeSize: { table: { disable: true } },
+    primeSeverity: { table: { disable: true } }
   }
 };
 
@@ -82,6 +106,8 @@ const commonTemplate = `
   [image]="image"
   [size]="size"
   [shape]="shape"
+  [badge]="badge"
+  [severity]="severity"
 ></extra-avatar>
 `;
 
@@ -100,17 +126,22 @@ export const Default: Story = {
     if (args.image) parts.push(`image="${args.image}"`);
     if (args.size && args.size !== 'base') parts.push(`size="${args.size}"`);
     if (args.shape && args.shape !== 'square') parts.push(`shape="${args.shape}"`);
+    if (args.badge) parts.push(`badge="${args.badge}"`);
+    if (args.severity && args.severity !== 'primary') parts.push(`severity="${args.severity}"`);
 
+    // Фолбэк без атрибутов, а не с label="A": иначе очистка контрола label молча
+    // возвращала бы «A», и контрол выглядел бы рабочим, ничего не меняя.
     const template = parts.length
       ? `<extra-avatar\n  ${parts.join('\n  ')}\n></extra-avatar>`
-      : `<extra-avatar label="A"></extra-avatar>`;
+      : `<extra-avatar></extra-avatar>`;
 
     return { props: args, template };
   },
   args: {
     label: 'A',
     size: 'base',
-    shape: 'square'
+    shape: 'square',
+    severity: 'primary'
   },
   parameters: {
     docs: {
@@ -159,7 +190,9 @@ export const Image: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Аватар с изображением. shape="square" — без обрезки, shape="circle" — с обрезкой по кругу.'
+        story:
+          'Аватар с изображением. Картинка вставляется как заливка блока и обрезается по его форме: ' +
+          'shape="square" — по скруглённому квадрату, shape="circle" — по кругу.'
       },
       source: {
         code: `<extra-avatar image="/assets/images/avatar/avatar.png"></extra-avatar>`
@@ -170,14 +203,26 @@ export const Image: Story = {
 
 // ── Sizes ────────────────────────────────────────────────────────────────────
 
+// Три размера рядом: смысл истории в сравнении, с одним аватаром сравнивать не с чем.
+// items-end — выравнивание по нижней границе, иначе разные размеры «плавают» по центру.
 export const Sizes: Story = {
-  render: (args) => ({ props: args, template: commonTemplate }),
-  args: { label: 'L', size: 'large', shape: 'square' },
+  render: () => ({
+    template: `
+      <div class="flex items-end gap-4">
+        <extra-avatar label="M"></extra-avatar>
+        <extra-avatar label="L" size="large"></extra-avatar>
+        <extra-avatar label="XL" size="xlarge"></extra-avatar>
+      </div>
+    `
+  }),
   parameters: {
+    controls: { disable: true },
     docs: {
-      description: { story: 'Размер аватара. Доступны: base, large, xlarge.' },
+      description: { story: 'Размеры аватара — base (по умолчанию), large и xlarge, показаны рядом для сравнения.' },
       source: {
-        code: `<extra-avatar label="L" size="large"></extra-avatar>`
+        code: `<extra-avatar label="M"></extra-avatar>
+<extra-avatar label="L" size="large"></extra-avatar>
+<extra-avatar label="XL" size="xlarge"></extra-avatar>`
       }
     }
   }
@@ -185,14 +230,23 @@ export const Sizes: Story = {
 
 // ── Shapes ───────────────────────────────────────────────────────────────────
 
+// Обе формы рядом — история про выбор между ними, а не про одну из них.
 export const Shapes: Story = {
-  render: (args) => ({ props: args, template: commonTemplate }),
-  args: { label: 'C', size: 'base', shape: 'circle' },
+  render: () => ({
+    template: `
+      <div class="flex items-center gap-4">
+        <extra-avatar label="S"></extra-avatar>
+        <extra-avatar label="C" shape="circle"></extra-avatar>
+      </div>
+    `
+  }),
   parameters: {
+    controls: { disable: true },
     docs: {
-      description: { story: 'Форма аватара. circle — круглый, square — квадратный (по умолчанию).' },
+      description: { story: 'Формы аватара — square (по умолчанию) и circle, показаны рядом для сравнения.' },
       source: {
-        code: `<extra-avatar label="C" shape="circle"></extra-avatar>`
+        code: `<extra-avatar label="S"></extra-avatar>
+<extra-avatar label="C" shape="circle"></extra-avatar>`
       }
     }
   }
@@ -216,6 +270,7 @@ export const Group: Story = {
     `
   }),
   parameters: {
+    controls: { disable: true },
     docs: {
       description: { story: 'Группа аватаров с перекрытием.' },
       source: {
@@ -234,19 +289,14 @@ export const Group: Story = {
 export const LabelWithBadge: Story = {
   render: (args) => ({
     props: args,
-    template: `
-      <p-overlay-badge value="4" severity="danger">
-        <extra-avatar label="U" size="xlarge"></extra-avatar>
-      </p-overlay-badge>
-    `
+    template: `<extra-avatar label="U" size="xlarge" badge="4" severity="danger"></extra-avatar>`
   }),
   parameters: {
+    controls: { disable: true },
     docs: {
-      description: { story: 'Аватар с текстовой меткой и бейджем через OverlayBadge.' },
+      description: { story: 'Аватар с текстовой меткой и бейджем (`badge` + `severity`).' },
       source: {
-        code: `<p-overlay-badge value="4" severity="danger">
-  <extra-avatar label="U" size="xlarge"></extra-avatar>
-</p-overlay-badge>`
+        code: `<extra-avatar label="U" size="xlarge" badge="4" severity="danger"></extra-avatar>`
       }
     }
   }
@@ -257,19 +307,14 @@ export const LabelWithBadge: Story = {
 export const IconWithBadge: Story = {
   render: (args) => ({
     props: args,
-    template: `
-      <p-overlay-badge value="8" severity="success">
-        <extra-avatar icon="ti ti-user" size="xlarge"></extra-avatar>
-      </p-overlay-badge>
-    `
+    template: `<extra-avatar icon="ti ti-user" size="xlarge" badge="8" severity="success"></extra-avatar>`
   }),
   parameters: {
+    controls: { disable: true },
     docs: {
-      description: { story: 'Аватар с иконкой и бейджем через OverlayBadge.' },
+      description: { story: 'Аватар с иконкой и бейджем (`badge` + `severity`).' },
       source: {
-        code: `<p-overlay-badge value="8" severity="success">
-  <extra-avatar icon="ti ti-user" size="xlarge"></extra-avatar>
-</p-overlay-badge>`
+        code: `<extra-avatar icon="ti ti-user" size="xlarge" badge="8" severity="success"></extra-avatar>`
       }
     }
   }
@@ -280,19 +325,14 @@ export const IconWithBadge: Story = {
 export const ImageWithBadge: Story = {
   render: (args) => ({
     props: args,
-    template: `
-      <p-overlay-badge value="8" severity="success">
-        <extra-avatar image="/assets/images/avatar/avatar.png" size="xlarge"></extra-avatar>
-      </p-overlay-badge>
-    `
+    template: `<extra-avatar image="/assets/images/avatar/avatar.png" size="xlarge" badge="8" severity="success"></extra-avatar>`
   }),
   parameters: {
+    controls: { disable: true },
     docs: {
-      description: { story: 'Аватар с изображением и бейджем через OverlayBadge.' },
+      description: { story: 'Аватар с изображением и бейджем (`badge` + `severity`).' },
       source: {
-        code: `<p-overlay-badge value="8" severity="success">
-  <extra-avatar image="/assets/images/avatar/avatar.png" size="xlarge"></extra-avatar>
-</p-overlay-badge>`
+        code: `<extra-avatar image="/assets/images/avatar/avatar.png" size="xlarge" badge="8" severity="success"></extra-avatar>`
       }
     }
   }
diff --git a/src/stories/components/avatar/examples/avatar-group.component.ts b/src/stories/components/avatar/examples/avatar-group.component.ts
deleted file mode 100644
index 41195d2f..00000000
--- a/src/stories/components/avatar/examples/avatar-group.component.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <extra-avatar-group>
-    <extra-avatar image="assets/images/avatar/amyelsner.png" shape="circle"></extra-avatar>
-    <extra-avatar image="assets/images/avatar/asiyajavayant.png" shape="circle"></extra-avatar>
-    <extra-avatar image="assets/images/avatar/xuxuefeng.png" shape="circle"></extra-avatar>
-    <extra-avatar image="assets/images/avatar/ionibowcher.png" shape="circle"></extra-avatar>
-    <extra-avatar image="assets/images/avatar/stephenshaw.png" shape="circle"></extra-avatar>
-    <extra-avatar label="+2" shape="circle"></extra-avatar>
-  </extra-avatar-group>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-group',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent, ExtraAvatarGroupComponent],
-  template,
-  styles
-})
-export class AvatarGroupExampleComponent {}
-
-export const Group: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-group></app-avatar-group>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Группа аватаров с перекрытием.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-group',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent, ExtraAvatarGroupComponent],
-  template: \`
-    <extra-avatar-group>
-      <extra-avatar image="assets/images/avatar/amyelsner.png" shape="circle"></extra-avatar>
-      <extra-avatar image="assets/images/avatar/asiyajavayant.png" shape="circle"></extra-avatar>
-      <extra-avatar image="assets/images/avatar/xuxuefeng.png" shape="circle"></extra-avatar>
-      <extra-avatar label="+2" shape="circle"></extra-avatar>
-    </extra-avatar-group>
-  \`,
-})
-export class AvatarGroupExampleComponent {}
-        `
-      }
-    }
-  }
-};
diff --git a/src/stories/components/avatar/examples/avatar-icon-badge.component.ts b/src/stories/components/avatar/examples/avatar-icon-badge.component.ts
deleted file mode 100644
index 7ced18f5..00000000
--- a/src/stories/components/avatar/examples/avatar-icon-badge.component.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { OverlayBadge } from 'primeng/overlaybadge';
-import { ExtraAvatarComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <div class="flex items-center gap-4">
-    <p-overlay-badge value="8" severity="success">
-      <extra-avatar icon="ti ti-user" size="xlarge"></extra-avatar>
-    </p-overlay-badge>
-    <p-overlay-badge value="8" severity="warn">
-      <extra-avatar icon="ti ti-bell" size="large"></extra-avatar>
-    </p-overlay-badge>
-  </div>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-icon-badge',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent, OverlayBadge],
-  template,
-  styles
-})
-export class AvatarIconBadgeComponent {}
-
-export const IconWithBadge: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-icon-badge></app-avatar-icon-badge>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Аватары с иконкой и бейджем через OverlayBadge.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-icon-badge',
-  standalone: true,
-  imports: [ExtraAvatarComponent, OverlayBadge],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: \`
-    <div class="flex items-center gap-4">
-      <p-overlay-badge value="8" severity="success">
-        <extra-avatar icon="ti ti-user" size="xlarge"></extra-avatar>
-      </p-overlay-badge>
-      <p-overlay-badge value="8" severity="warn">
-        <extra-avatar icon="ti ti-bell" size="large"></extra-avatar>
-      </p-overlay-badge>
-    </div>
-  \`,
-})
-export class AvatarIconBadgeComponent {}
-        `
-      }
-    }
-  }
-};
diff --git a/src/stories/components/avatar/examples/avatar-icon.component.ts b/src/stories/components/avatar/examples/avatar-icon.component.ts
deleted file mode 100644
index 237fc994..00000000
--- a/src/stories/components/avatar/examples/avatar-icon.component.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { ExtraAvatarComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <div class="flex items-center gap-4">
-    <extra-avatar icon="ti ti-user"></extra-avatar>
-    <extra-avatar icon="ti ti-search" size="large"></extra-avatar>
-    <extra-avatar icon="ti ti-check" size="xlarge"></extra-avatar>
-  </div>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-icon',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent],
-  template,
-  styles
-})
-export class AvatarIconComponent {}
-
-export const Icon: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-icon></app-avatar-icon>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Аватары с иконкой разных размеров.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-icon',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent],
-  template: \`
-    <div class="flex items-center gap-4">
-      <extra-avatar icon="ti ti-user"></extra-avatar>
-      <extra-avatar icon="ti ti-search" size="large"></extra-avatar>
-      <extra-avatar icon="ti ti-check" size="xlarge"></extra-avatar>
-    </div>
-  \`,
-})
-export class AvatarIconComponent {}
-        `
-      }
-    }
-  }
-};
diff --git a/src/stories/components/avatar/examples/avatar-image-badge.component.ts b/src/stories/components/avatar/examples/avatar-image-badge.component.ts
deleted file mode 100644
index 2b2106bc..00000000
--- a/src/stories/components/avatar/examples/avatar-image-badge.component.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { OverlayBadge } from 'primeng/overlaybadge';
-import { ExtraAvatarComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <div class="flex items-center gap-4">
-    <p-overlay-badge value="8" severity="success">
-      <extra-avatar image="assets/images/avatar/amyelsner.png" size="xlarge" shape="circle"></extra-avatar>
-    </p-overlay-badge>
-    <p-overlay-badge value="8" severity="success">
-      <extra-avatar image="assets/images/avatar/asiyajavayant.png" size="large"></extra-avatar>
-    </p-overlay-badge>
-  </div>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-image-badge',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent, OverlayBadge],
-  template,
-  styles
-})
-export class AvatarImageBadgeComponent {}
-
-export const ImageWithBadge: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-image-badge></app-avatar-image-badge>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Аватары с изображением и бейджем через OverlayBadge.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-image-badge',
-  standalone: true,
-  imports: [ExtraAvatarComponent, OverlayBadge],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: \`
-    <div class="flex items-center gap-4">
-        <p-overlay-badge value="8" severity="success">
-          <extra-avatar image="assets/images/avatar/amyelsner.png" size="xlarge" shape="circle"></extra-avatar>
-        </p-overlay-badge>
-        <p-overlay-badge value="8" severity="success">
-          <extra-avatar image="assets/images/avatar/asiyajavayant.png" size="large"></extra-avatar>
-        </p-overlay-badge>
-    </div>
-  \`,
-})
-export class AvatarImageBadgeComponent {}
-        `
-      }
-    }
-  }
-};
diff --git a/src/stories/components/avatar/examples/avatar-image.component.ts b/src/stories/components/avatar/examples/avatar-image.component.ts
deleted file mode 100644
index a94e30d4..00000000
--- a/src/stories/components/avatar/examples/avatar-image.component.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { ExtraAvatarComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <div class="flex items-center gap-4">
-    <extra-avatar image="assets/images/avatar/amyelsner.png"></extra-avatar>
-    <extra-avatar image="assets/images/avatar/asiyajavayant.png" size="large"></extra-avatar>
-    <extra-avatar image="assets/images/avatar/xuxuefeng.png" size="xlarge"></extra-avatar>
-  </div>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-image',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent],
-  template,
-  styles
-})
-export class AvatarImageComponent {}
-
-export const Image: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-image></app-avatar-image>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Аватары с изображением разных размеров.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-image',
-  standalone: true,
-  imports: [ExtraAvatarComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: \`
-    <div class="flex items-center gap-4">
-      <extra-avatar image="assets/images/avatar/amyelsner.png"></extra-avatar>
-      <extra-avatar image="assets/images/avatar/asiyajavayant.png" size="large"></extra-avatar>
-      <extra-avatar image="assets/images/avatar/xuxuefeng.png" size="xlarge"></extra-avatar>
-    </div>
-  \`,
-})
-export class AvatarImageComponent {}
-        `
-      }
-    }
-  }
-};
diff --git a/src/stories/components/avatar/examples/avatar-label-badge.component.ts b/src/stories/components/avatar/examples/avatar-label-badge.component.ts
deleted file mode 100644
index 89cfb00f..00000000
--- a/src/stories/components/avatar/examples/avatar-label-badge.component.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { OverlayBadge } from 'primeng/overlaybadge';
-import { ExtraAvatarComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <div class="flex items-center gap-4">
-    <p-overlay-badge value="4" severity="danger">
-      <extra-avatar label="U" size="xlarge"></extra-avatar>
-    </p-overlay-badge>
-    <p-overlay-badge value="new" severity="info">
-      <extra-avatar label="A" size="large"></extra-avatar>
-    </p-overlay-badge>
-  </div>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-label-badge',
-  standalone: true,
-  imports: [ExtraAvatarComponent, OverlayBadge],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template,
-  styles
-})
-export class AvatarLabelBadgeComponent {}
-// todo разобраться со стори, почему primeng здесь
-export const LabelWithBadge: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-label-badge></app-avatar-label-badge>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Аватары с текстом и бейджем через OverlayBadge.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-label-badge',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent, OverlayBadge],
-  template: \`
-    <div class="flex items-center gap-4">
-        <p-overlay-badge value="4" severity="danger">
-          <extra-avatar label="U" size="xlarge"></extra-avatar>
-        </p-overlay-badge>
-        <p-overlay-badge value="new" severity="info">
-          <extra-avatar label="A" size="large"></extra-avatar>
-        </p-overlay-badge>
-    </div>
-  \`,
-})
-export class AvatarLabelBadgeComponent {}
-        `
-      }
-    }
-  }
-};
diff --git a/src/stories/components/avatar/examples/avatar-label.component.ts b/src/stories/components/avatar/examples/avatar-label.component.ts
deleted file mode 100644
index ac370df1..00000000
--- a/src/stories/components/avatar/examples/avatar-label.component.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { ExtraAvatarComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <div class="flex items-center gap-4">
-    <extra-avatar label="P"></extra-avatar>
-    <extra-avatar label="V" size="large"></extra-avatar>
-    <extra-avatar label="U" size="xlarge"></extra-avatar>
-  </div>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-label',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent],
-  template,
-  styles
-})
-export class AvatarLabelComponent {}
-
-export const Label: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-label></app-avatar-label>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Аватары с текстовой меткой разных размеров.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-label',
-  standalone: true,
-  imports: [ExtraAvatarComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: \`
-    <div class="flex items-center gap-4">
-      <extra-avatar label="P"></extra-avatar>
-      <extra-avatar label="V" size="large"></extra-avatar>
-      <extra-avatar label="U" size="xlarge"></extra-avatar>
-    </div>
-  \`,
-})
-export class AvatarLabelComponent {}
-        `
-      }
-    }
-  }
-};
diff --git a/src/stories/components/avatar/examples/avatar-shapes.component.ts b/src/stories/components/avatar/examples/avatar-shapes.component.ts
deleted file mode 100644
index 92b44876..00000000
--- a/src/stories/components/avatar/examples/avatar-shapes.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { ExtraAvatarComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <div class="flex items-center gap-4">
-    <extra-avatar label="S"></extra-avatar>
-    <extra-avatar label="C" shape="circle"></extra-avatar>
-  </div>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-shapes',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent],
-  template,
-  styles
-})
-export class AvatarShapesComponent {}
-
-export const Shapes: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-shapes></app-avatar-shapes>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Формы аватара: square (по умолчанию) и circle.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-shapes',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent],
-  template: \`
-    <div class="flex items-center gap-4">
-      <extra-avatar label="S"></extra-avatar>
-      <extra-avatar label="C" shape="circle"></extra-avatar>
-    </div>
-  \`,
-})
-export class AvatarShapesComponent {}
-        `
-      }
-    }
-  }
-};
diff --git a/src/stories/components/avatar/examples/avatar-sizes.component.ts b/src/stories/components/avatar/examples/avatar-sizes.component.ts
deleted file mode 100644
index b20f4e9a..00000000
--- a/src/stories/components/avatar/examples/avatar-sizes.component.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { StoryObj } from '@storybook/angular';
-import { ExtraAvatarComponent } from '../../../../lib/components/avatar/avatar.component';
-
-const template = `
-<div class="p-4">
-  <div class="flex items-end gap-4">
-    <extra-avatar label="M"></extra-avatar>
-    <extra-avatar label="L" size="large"></extra-avatar>
-    <extra-avatar label="XL" size="xlarge"></extra-avatar>
-  </div>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-avatar-sizes',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent],
-  template,
-  styles
-})
-export class AvatarSizesComponent {}
-
-export const Sizes: StoryObj = {
-  render: () => ({
-    template: `<app-avatar-sizes></app-avatar-sizes>`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Все доступные размеры аватара: base, large, xlarge.'
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { ExtraAvatarComponent } from '@cdek-it/angular-ui-kit';
-
-@Component({
-  selector: 'app-avatar-sizes',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExtraAvatarComponent],
-  template: \`
-    <div class="flex items-end gap-4">
-      <extra-avatar label="M"></extra-avatar>
-      <extra-avatar label="L" size="large"></extra-avatar>
-      <extra-avatar label="XL" size="xlarge"></extra-avatar>
-    </div>
-  \`,
-})
-export class AvatarSizesComponent {}
-        `
-      }
-    }
-  }
-};