diff --git a/website/plasma-b2c-docs/docs/components/AudioPlayer.mdx b/website/plasma-b2c-docs/docs/components/AudioPlayer.mdx
index a65bcf06b3..8493066ec8 100644
--- a/website/plasma-b2c-docs/docs/components/AudioPlayer.mdx
+++ b/website/plasma-b2c-docs/docs/components/AudioPlayer.mdx
@@ -3,10 +3,12 @@ id: AudioPlayer
 title: AudioPlayer
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # AudioPlayer
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="AudioPlayer" />
 <PropsTable name="AudioPlayer" />
 <StorybookLink name="AudioPlayer" />
diff --git a/website/plasma-b2c-docs/docs/components/Card.mdx b/website/plasma-b2c-docs/docs/components/Card.mdx
index 5efda50106..a6dae4ad52 100644
--- a/website/plasma-b2c-docs/docs/components/Card.mdx
+++ b/website/plasma-b2c-docs/docs/components/Card.mdx
@@ -3,9 +3,12 @@ id: card
 title: Card
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Card
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 Набор компонентов для создания карточек.
 
 <StorybookLink name="Card" />
diff --git a/website/plasma-b2c-docs/docs/components/Carousel.mdx b/website/plasma-b2c-docs/docs/components/Carousel.mdx
index 07dae3c91f..0819d1a2ad 100644
--- a/website/plasma-b2c-docs/docs/components/Carousel.mdx
+++ b/website/plasma-b2c-docs/docs/components/Carousel.mdx
@@ -3,9 +3,12 @@ id: carousel
 title: Carousel
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Carousel
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 Набор компонентов для создания списков с прокруткой (галерей).
 
 <StorybookLink name="Carousel" />
diff --git a/website/plasma-b2c-docs/docs/components/ElasticGrid.mdx b/website/plasma-b2c-docs/docs/components/ElasticGrid.mdx
index e106095a91..1940a97f97 100644
--- a/website/plasma-b2c-docs/docs/components/ElasticGrid.mdx
+++ b/website/plasma-b2c-docs/docs/components/ElasticGrid.mdx
@@ -3,10 +3,12 @@ id: ElasticGrid
 title: ElasticGrid
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # ElasticGrid
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="ElasticGrid" />
 <PropsTable name="ElasticGrid" />
 <StorybookLink name="ElasticGrid" />
diff --git a/website/plasma-b2c-docs/docs/components/Modal.mdx b/website/plasma-b2c-docs/docs/components/Modal.mdx
index 2578d8fa70..82b3fe5789 100644
--- a/website/plasma-b2c-docs/docs/components/Modal.mdx
+++ b/website/plasma-b2c-docs/docs/components/Modal.mdx
@@ -3,9 +3,12 @@ id: modal
 title: Modal
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Modal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Modal" />
 <PropsTable name="Modal" />
 <StorybookLink name="Modal" />
diff --git a/website/plasma-b2c-docs/docs/components/Overlay.mdx b/website/plasma-b2c-docs/docs/components/Overlay.mdx
index 75bf1700de..4de0e7a476 100644
--- a/website/plasma-b2c-docs/docs/components/Overlay.mdx
+++ b/website/plasma-b2c-docs/docs/components/Overlay.mdx
@@ -3,9 +3,12 @@ id: overlay
 title: Overlay
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Overlay
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Overlay" />
 <PropsTable name="Overlay" exclude={['css']} />
 <StorybookLink name="Overlay" />
diff --git a/website/plasma-b2c-docs/docs/components/Portal.mdx b/website/plasma-b2c-docs/docs/components/Portal.mdx
index 1c1abbcfb6..1f05e1bf25 100644
--- a/website/plasma-b2c-docs/docs/components/Portal.mdx
+++ b/website/plasma-b2c-docs/docs/components/Portal.mdx
@@ -3,9 +3,12 @@ id: portal
 title: Portal
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Portal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Portal" />
 <PropsTable name="Portal" exclude={['css']} />
 <StorybookLink name="Portal" />
diff --git a/website/plasma-b2c-docs/docs/components/PreviewGallery.mdx b/website/plasma-b2c-docs/docs/components/PreviewGallery.mdx
index 491765d0f1..687cb641f8 100644
--- a/website/plasma-b2c-docs/docs/components/PreviewGallery.mdx
+++ b/website/plasma-b2c-docs/docs/components/PreviewGallery.mdx
@@ -3,10 +3,12 @@ id: PreviewGallery
 title: PreviewGallery
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # PreviewGallery
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="PreviewGallery" />
 <PropsTable name="PreviewGallery" />
 <StorybookLink name="PreviewGallery" />
diff --git a/website/plasma-b2c-docs/docs/components/Upload.mdx b/website/plasma-b2c-docs/docs/components/Upload.mdx
index 9b65c2365b..fdbf76e796 100644
--- a/website/plasma-b2c-docs/docs/components/Upload.mdx
+++ b/website/plasma-b2c-docs/docs/components/Upload.mdx
@@ -3,10 +3,12 @@ id: Upload
 title: Upload
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Upload
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Upload" />
 <PropsTable name="Upload" />
 <StorybookLink name="Upload" />
diff --git a/website/plasma-b2c-docs/docs/components/UploadAudio.mdx b/website/plasma-b2c-docs/docs/components/UploadAudio.mdx
index 9e476c87b0..eceac212ad 100644
--- a/website/plasma-b2c-docs/docs/components/UploadAudio.mdx
+++ b/website/plasma-b2c-docs/docs/components/UploadAudio.mdx
@@ -3,9 +3,12 @@ id: UploadAudio
 title: UploadAudio
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
+
+# UploadAudio
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 
-## UploadAudio
 <Description name="UploadAudio" />
 <PropsTable name="UploadAudio" />
 <StorybookLink name="UploadAudio" />
diff --git a/website/plasma-b2c-docs/docs/components/UploadVisual.mdx b/website/plasma-b2c-docs/docs/components/UploadVisual.mdx
index 3d172c3d1e..82837ef0e5 100644
--- a/website/plasma-b2c-docs/docs/components/UploadVisual.mdx
+++ b/website/plasma-b2c-docs/docs/components/UploadVisual.mdx
@@ -3,10 +3,12 @@ id: UploadVisual
 title: UploadVisual
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # UploadVisual
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="UploadVisual" />
 <PropsTable name="UploadVisual" />
 <StorybookLink name="UploadVisual" />
diff --git a/website/plasma-b2c-docs/src/components/Badge.tsx b/website/plasma-b2c-docs/src/components/Badge.tsx
new file mode 100644
index 0000000000..76bcabcd00
--- /dev/null
+++ b/website/plasma-b2c-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/plasma-b2c';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/plasma-b2c-docs/src/components/index.ts b/website/plasma-b2c-docs/src/components/index.ts
index cc8153c866..0014047f8f 100644
--- a/website/plasma-b2c-docs/src/components/index.ts
+++ b/website/plasma-b2c-docs/src/components/index.ts
@@ -2,3 +2,4 @@ export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
 export { StorybookLink } from './Storybook';
+export { DocsBadge as Badge } from './Badge';
diff --git a/website/plasma-giga-docs/docs/components/Overlay.mdx b/website/plasma-giga-docs/docs/components/Overlay.mdx
index dee1d2b430..e7c7baffec 100644
--- a/website/plasma-giga-docs/docs/components/Overlay.mdx
+++ b/website/plasma-giga-docs/docs/components/Overlay.mdx
@@ -3,8 +3,10 @@ id: overlay
 title: Overlay
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, Badge } from '@site/src/components';
 
 # Overlay
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Overlay" />
 <PropsTable name="Overlay" exclude={['css']} />
diff --git a/website/plasma-giga-docs/docs/components/Portal.mdx b/website/plasma-giga-docs/docs/components/Portal.mdx
index e39226d646..ae227cd279 100644
--- a/website/plasma-giga-docs/docs/components/Portal.mdx
+++ b/website/plasma-giga-docs/docs/components/Portal.mdx
@@ -3,9 +3,12 @@ id: portal
 title: Portal
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, Badge } from '@site/src/components';
 
 # Portal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Portal" />
 <PropsTable name="Portal" exclude={['css']} />
 
diff --git a/website/plasma-giga-docs/src/components/Badge.tsx b/website/plasma-giga-docs/src/components/Badge.tsx
new file mode 100644
index 0000000000..6bd27d9f3d
--- /dev/null
+++ b/website/plasma-giga-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/plasma-giga';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/plasma-giga-docs/src/components/index.ts b/website/plasma-giga-docs/src/components/index.ts
index 5c25fa7c12..700d3237be 100644
--- a/website/plasma-giga-docs/src/components/index.ts
+++ b/website/plasma-giga-docs/src/components/index.ts
@@ -1,3 +1,4 @@
 export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
+export { DocsBadge as Badge } from './Badge';
diff --git a/website/plasma-web-docs/docs/components/AudioPlayer.mdx b/website/plasma-web-docs/docs/components/AudioPlayer.mdx
index a3b35fa7e8..c1b7750565 100644
--- a/website/plasma-web-docs/docs/components/AudioPlayer.mdx
+++ b/website/plasma-web-docs/docs/components/AudioPlayer.mdx
@@ -3,10 +3,12 @@ id: AudioPlayer
 title: AudioPlayer
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # AudioPlayer
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="AudioPlayer" />
 <PropsTable name="AudioPlayer" />
 <StorybookLink name="AudioPlayer" />
diff --git a/website/plasma-web-docs/docs/components/Card.mdx b/website/plasma-web-docs/docs/components/Card.mdx
index e744268142..935caca6a1 100644
--- a/website/plasma-web-docs/docs/components/Card.mdx
+++ b/website/plasma-web-docs/docs/components/Card.mdx
@@ -3,9 +3,12 @@ id: card
 title: Card
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Card
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 Набор компонентов для создания карточек.
 
 <StorybookLink name="Card" />
diff --git a/website/plasma-web-docs/docs/components/Carousel.mdx b/website/plasma-web-docs/docs/components/Carousel.mdx
index e6bd67398c..e73924e673 100644
--- a/website/plasma-web-docs/docs/components/Carousel.mdx
+++ b/website/plasma-web-docs/docs/components/Carousel.mdx
@@ -3,9 +3,12 @@ id: carousel
 title: Carousel
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Carousel
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 Набор компонентов для создания списков с прокруткой (галерей).
 
 <StorybookLink name="Carousel" />
diff --git a/website/plasma-web-docs/docs/components/ElasticGrid.mdx b/website/plasma-web-docs/docs/components/ElasticGrid.mdx
index 70ad46e401..5411eae48d 100644
--- a/website/plasma-web-docs/docs/components/ElasticGrid.mdx
+++ b/website/plasma-web-docs/docs/components/ElasticGrid.mdx
@@ -3,10 +3,12 @@ id: ElasticGrid
 title: ElasticGrid
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # ElasticGrid
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="ElasticGrid" />
 <PropsTable name="ElasticGrid" />
 <StorybookLink name="ElasticGrid" />
diff --git a/website/plasma-web-docs/docs/components/Modal.mdx b/website/plasma-web-docs/docs/components/Modal.mdx
index 7dedf16e06..732a09bd14 100644
--- a/website/plasma-web-docs/docs/components/Modal.mdx
+++ b/website/plasma-web-docs/docs/components/Modal.mdx
@@ -3,9 +3,11 @@ id: modal
 title: Modal
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Modal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Modal" />
 <PropsTable name="Modal" />
 <StorybookLink name="Modal" />
diff --git a/website/plasma-web-docs/docs/components/Overlay.mdx b/website/plasma-web-docs/docs/components/Overlay.mdx
index 75bf1700de..a3ce63c170 100644
--- a/website/plasma-web-docs/docs/components/Overlay.mdx
+++ b/website/plasma-web-docs/docs/components/Overlay.mdx
@@ -3,9 +3,11 @@ id: overlay
 title: Overlay
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Overlay
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Overlay" />
 <PropsTable name="Overlay" exclude={['css']} />
 <StorybookLink name="Overlay" />
diff --git a/website/plasma-web-docs/docs/components/Portal.mdx b/website/plasma-web-docs/docs/components/Portal.mdx
index ba12c7d0b4..f5df252013 100644
--- a/website/plasma-web-docs/docs/components/Portal.mdx
+++ b/website/plasma-web-docs/docs/components/Portal.mdx
@@ -3,9 +3,11 @@ id: portal
 title: Portal
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Portal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Portal" />
 <PropsTable name="Portal" exclude={['css']} />
 <StorybookLink name="Portal" />
diff --git a/website/plasma-web-docs/docs/components/PreviewGallery.mdx b/website/plasma-web-docs/docs/components/PreviewGallery.mdx
index 3f09833d5d..f8557b1caa 100644
--- a/website/plasma-web-docs/docs/components/PreviewGallery.mdx
+++ b/website/plasma-web-docs/docs/components/PreviewGallery.mdx
@@ -3,10 +3,12 @@ id: PreviewGallery
 title: PreviewGallery
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # PreviewGallery
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="PreviewGallery" />
 <PropsTable name="PreviewGallery" />
 <StorybookLink name="PreviewGallery" />
diff --git a/website/plasma-web-docs/docs/components/Upload.mdx b/website/plasma-web-docs/docs/components/Upload.mdx
index 57e59a963f..12b9bed833 100644
--- a/website/plasma-web-docs/docs/components/Upload.mdx
+++ b/website/plasma-web-docs/docs/components/Upload.mdx
@@ -3,10 +3,12 @@ id: Upload
 title: Upload
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # Upload
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Upload" />
 <PropsTable name="Upload" />
 <StorybookLink name="Upload" />
diff --git a/website/plasma-web-docs/docs/components/UploadAudio.mdx b/website/plasma-web-docs/docs/components/UploadAudio.mdx
index 3303736370..f04e68a0dd 100644
--- a/website/plasma-web-docs/docs/components/UploadAudio.mdx
+++ b/website/plasma-web-docs/docs/components/UploadAudio.mdx
@@ -3,9 +3,11 @@ id: UploadAudio
 title: UploadAudio
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
-## UploadAudio
+# UploadAudio
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="UploadAudio" />
 <PropsTable name="UploadAudio" />
 <StorybookLink name="UploadAudio" />
diff --git a/website/plasma-web-docs/docs/components/UploadVisual.mdx b/website/plasma-web-docs/docs/components/UploadVisual.mdx
index a991d11258..43124c7160 100644
--- a/website/plasma-web-docs/docs/components/UploadVisual.mdx
+++ b/website/plasma-web-docs/docs/components/UploadVisual.mdx
@@ -3,10 +3,12 @@ id: UploadVisual
 title: UploadVisual
 ---
 
-import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import { PropsTable, Description, StorybookLink, Badge } from '@site/src/components';
 
 # UploadVisual
 
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="UploadVisual" />
 <PropsTable name="UploadVisual" />
 <StorybookLink name="UploadVisual" />
diff --git a/website/plasma-web-docs/src/components/Badge.tsx b/website/plasma-web-docs/src/components/Badge.tsx
new file mode 100644
index 0000000000..56e029ac52
--- /dev/null
+++ b/website/plasma-web-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/plasma-web';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/plasma-web-docs/src/components/index.ts b/website/plasma-web-docs/src/components/index.ts
index cc8153c866..0014047f8f 100644
--- a/website/plasma-web-docs/src/components/index.ts
+++ b/website/plasma-web-docs/src/components/index.ts
@@ -2,3 +2,4 @@ export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
 export { StorybookLink } from './Storybook';
+export { DocsBadge as Badge } from './Badge';
diff --git a/website/sdds-cs-docs/src/components/Badge.tsx b/website/sdds-cs-docs/src/components/Badge.tsx
new file mode 100644
index 0000000000..7169463b95
--- /dev/null
+++ b/website/sdds-cs-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/sdds-cs';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/sdds-cs-docs/src/components/index.ts b/website/sdds-cs-docs/src/components/index.ts
index 5c25fa7c12..700d3237be 100644
--- a/website/sdds-cs-docs/src/components/index.ts
+++ b/website/sdds-cs-docs/src/components/index.ts
@@ -1,3 +1,4 @@
 export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
+export { DocsBadge as Badge } from './Badge';
diff --git a/website/sdds-dfa-docs/src/components/Badge.tsx b/website/sdds-dfa-docs/src/components/Badge.tsx
new file mode 100644
index 0000000000..2df711db9c
--- /dev/null
+++ b/website/sdds-dfa-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/sdds-dfa';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/sdds-dfa-docs/src/components/index.ts b/website/sdds-dfa-docs/src/components/index.ts
index 5c25fa7c12..700d3237be 100644
--- a/website/sdds-dfa-docs/src/components/index.ts
+++ b/website/sdds-dfa-docs/src/components/index.ts
@@ -1,3 +1,4 @@
 export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
+export { DocsBadge as Badge } from './Badge';
diff --git a/website/sdds-insol-docs/docs/components/Overlay.mdx b/website/sdds-insol-docs/docs/components/Overlay.mdx
index dee1d2b430..e7c7baffec 100644
--- a/website/sdds-insol-docs/docs/components/Overlay.mdx
+++ b/website/sdds-insol-docs/docs/components/Overlay.mdx
@@ -3,8 +3,10 @@ id: overlay
 title: Overlay
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, Badge } from '@site/src/components';
 
 # Overlay
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
 <Description name="Overlay" />
 <PropsTable name="Overlay" exclude={['css']} />
diff --git a/website/sdds-insol-docs/docs/components/Portal.mdx b/website/sdds-insol-docs/docs/components/Portal.mdx
index 50e3947321..0ce6d11beb 100644
--- a/website/sdds-insol-docs/docs/components/Portal.mdx
+++ b/website/sdds-insol-docs/docs/components/Portal.mdx
@@ -3,9 +3,12 @@ id: portal
 title: Portal
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, Badge } from '@site/src/components';
 
 # Portal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Portal" />
 <PropsTable name="Portal" exclude={['css']} />
 
diff --git a/website/sdds-insol-docs/src/components/Badge.tsx b/website/sdds-insol-docs/src/components/Badge.tsx
new file mode 100644
index 0000000000..71594fac8d
--- /dev/null
+++ b/website/sdds-insol-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/sdds-insol';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/sdds-insol-docs/src/components/index.ts b/website/sdds-insol-docs/src/components/index.ts
index 5c25fa7c12..700d3237be 100644
--- a/website/sdds-insol-docs/src/components/index.ts
+++ b/website/sdds-insol-docs/src/components/index.ts
@@ -1,3 +1,4 @@
 export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
+export { DocsBadge as Badge } from './Badge';
diff --git a/website/sdds-serv-docs/docs/components/Overlay.mdx b/website/sdds-serv-docs/docs/components/Overlay.mdx
index dee1d2b430..9a97f67c68 100644
--- a/website/sdds-serv-docs/docs/components/Overlay.mdx
+++ b/website/sdds-serv-docs/docs/components/Overlay.mdx
@@ -3,8 +3,11 @@ id: overlay
 title: Overlay
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, Badge } from '@site/src/components';
 
 # Overlay
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Overlay" />
 <PropsTable name="Overlay" exclude={['css']} />
diff --git a/website/sdds-serv-docs/docs/components/Portal.mdx b/website/sdds-serv-docs/docs/components/Portal.mdx
index ba9d3abacd..f5724a38a6 100644
--- a/website/sdds-serv-docs/docs/components/Portal.mdx
+++ b/website/sdds-serv-docs/docs/components/Portal.mdx
@@ -3,9 +3,12 @@ id: portal
 title: Portal
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, Badge } from '@site/src/components';
 
 # Portal
+
+<Badge title="styled-components" desctiption="Доступен только в сборке `styled-components`" />
+
 <Description name="Portal" />
 <PropsTable name="Portal" exclude={['css']} />
 
diff --git a/website/sdds-serv-docs/src/components/Badge.tsx b/website/sdds-serv-docs/src/components/Badge.tsx
new file mode 100644
index 0000000000..033e152c3d
--- /dev/null
+++ b/website/sdds-serv-docs/src/components/Badge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Badge, Tooltip, BodyXS } from '@salutejs/sdds-serv';
+
+export const DocsBadge: FC<{ title: string; desctiption: string }> = ({ title, desctiption }) => (
+    <div
+        style={{
+            marginTop: '-22px',
+            marginBottom: '16px',
+        }}
+    >
+        <Tooltip
+            target={
+                <Badge size="m" view="accent">
+                    <BodyXS bold>{title}</BodyXS>
+                </Badge>
+            }
+            text={desctiption}
+            placement="right-start"
+            trigger="hover"
+            hoverTimeout={500}
+            maxWidth="400px"
+            hasArrow={false}
+            style={{
+                verticalAlign: 'middle',
+            }}
+        />
+    </div>
+);
diff --git a/website/sdds-serv-docs/src/components/index.ts b/website/sdds-serv-docs/src/components/index.ts
index 5c25fa7c12..700d3237be 100644
--- a/website/sdds-serv-docs/src/components/index.ts
+++ b/website/sdds-serv-docs/src/components/index.ts
@@ -1,3 +1,4 @@
 export { CodeSandbox } from './CodeSandbox';
 export { Description } from './Description';
 export { PropsTable } from './PropsTable';
+export { DocsBadge as Badge } from './Badge';