Merge pull request #302 from Infineon/299-documentation-icon-button

added icon button doc

packages/components/src/components/icon-button/Usage.mdx

@@ -0,0 +1,92 @@
+
+import { Meta } from '@storybook/blocks';
+
+import * as IconButtonStories from './icon-button.stories';
+import IconButtonGroupingByFunction from '../../../public-storybook/images/icon-button/icon-button-grouping-by-function.png';
+import IconButtonGroupingByImportance from '../../../public-storybook/images/icon-button/icon-button-grouping-by-importance.png';
+import IconButtonInteraction from '../../../public-storybook/images/icon-button/icon-button-interaction.png';
+import IconButtonPrimaryStates from '../../../public-storybook/images/icon-button/icon-button-primary-states.png';
+import IconButtonSecondaryStates from '../../../public-storybook/images/icon-button/icon-button-secondary-states.png';
+import IconButtonTertiaryStates from '../../../public-storybook/images/icon-button/icon-button-tertiary-states.png';
+import IconButtonSizes from '../../../public-storybook/images/icon-button/icon-button-sizes.png';
+import IconButtonStyles from '../../../public-storybook/images/icon-button/icon-button-styles.png';
+import IconButtonVariantPrimary from '../../../public-storybook/images/icon-button/icon-button-variant-primary.png';
+import IconButtonVariantSecondary from '../../../public-storybook/images/icon-button/icon-button-variant-secondary.png';
+import IconButtonVariantTertiary from '../../../public-storybook/images/icon-button/icon-button-variant-tertiary.png';
+
+<Meta of={IconButtonStories} /> 
+
+# Icon Button
+Icon buttons can be more space-efficient compared to text buttons, especially when you have limited screen real estate or need to display multiple actions in a compact area. By using icons instead of text labels, you can fit more buttons within a given space without sacrificing usability. 
+
+## Usage
+
+### When to use
+- When you have limited screen space and need to prioritize visual clarity and simplicity.
+- When you want to provide additional functions inside a component like "Delete", "Edit", or just to trigger a dropdown menu.
+
+### When not to use
+- Avoid using icon-buttons as navigational items.
+- When the user needs to send a message with forms. Instead use a button with label.
+- If the action associated with the button is not self-explanatory or requires additional context. Instead use a button with label.
+
+## Variants
+
+### Primary
+Used for CTA-like actions like "Add to cart".
+<img src={IconButtonVariantPrimary} alt="Icon Button Variant Primary" width="50%" />
+
+#### States
+<img src={IconButtonPrimaryStates} alt="Icon Button Primary States" />
+
+### Secondary
+Mostly used as neighbour icon button beside the primary one.
+<img src={IconButtonVariantSecondary} alt="Icon Button Variant Secondary" width="50%" />
+
+#### States
+<img src={IconButtonSecondaryStates} alt="Icon Button Secondary States" />
+
+### Tertiary
+Mostly used for other supportive actions where visual dominance is not the case.
+<img src={IconButtonVariantTertiary} alt="Icon Button Variant Tertiary" width="50%" />
+
+#### States
+<img src={IconButtonTertiaryStates} alt="Icon Button Tertiary States" />
+
+## Style
+Our design system provides two different styles: square and round.
+<img src={IconButtonStyles} alt="Icon Button Styles" />
+
+## Size
+<img src={IconButtonSizes} alt="Icon Button Sizes" />
+
+### 20px
+Our smallest size which should be handled as a function item. It can be used alone or in an icon group.
+
+### 32px
+From this size it is possible to provide an icon group which can be grouped by importance. This is our default size.
+
+### 36px
+To complement other DDS components that have the same size, we offer the same capabilities as the 32px icon button.
+
+### 40px
+Our largest icon button to be used for single actions such as pagination arrows or a support icon button that has a fixed position when scrolling.
+
+## Mouse interaction
+While icon buttons like the primary and secondary have a visible clicking area, the tertiary one is invisible. 
+<img src={IconButtonInteraction} alt="Icon Button Interaction" />
+
+## Grouping icon buttons
+It is often necessary to provide several icons in a central location. This helps users to recognise and distinguish the actions they can perform on a page or screen. Grouping icon buttons also improves the visual hierarchy of a design, making it clearer and more user-friendly.
+
+### Group by importance
+Group icon buttons by importance if you want to help users quickly identify the primary action they should perform. You can use a primary icon button for an important action such as "Add to cart" and a secondary one for "Download PDF". You can also place a tertiary icon button next to the others, e.g. to provide a "More" icon where a drop-down menu with supplementary options can be accessed after clicking.
+<img src={IconButtonGroupingByImportance} alt="Icon Button Group by Importacne" />
+
+### Group by function
+Group buttons by function to help users quickly find the action they need to take based on the task they are trying to complete. For example this can be useful in tables to manage a single row with actions like "Download", "Share", "Mark as favorite".
+<img src={IconButtonGroupingByFunction} alt="Icon Button Group by Function" />
+
+***
+Check out the Figma component: **[Icon Button](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=11700-6732&mode=design&t=xVWOPkYnUvh53BSW-4)**
+***

packages/components/src/components/icon-button/icon-button.stories.ts

@@ -1,5 +1,5 @@
 export default {
-  title: "Components/IconButton",
+  title: "Components/Icon Button",
   tags: ['autodocs'],
 
   args: {