added badge doc

packages/components/src/components/badge/Usage.mdx

@@ -0,0 +1,25 @@
+import { Meta  } from '@storybook/blocks';
+import * as BadgeStories from './badge.stories';
+import BadgeDafault from '../../../public-storybook/images/badge/badge-default.png';
+
+<Meta of={BadgeStories} />
+
+# Badge
+Badges are small non-clickable visual indicators used to highlight and convey information such as categories of our products, topics or any other relevant data within our applications. It can be applied to different types of content.
+
+## Usage
+
+### When to use
+- To give users a quick way to understand the meaning or status of a component e.g. in product lists or in cards.
+
+### When not to use
+- If you're using long lines of label text.
+- If you want to highlight critical information or warnings that require immediate attention.
+
+## Icon support
+The badge is also available with an icon.
+<img src={BadgeDafault} alt="Badge Default" />
+
+***
+Check out the Figma component: **[Badge](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=23904-14546&mode=design&t=UQ0Dm7ueLiXMURK1-4)**
+***