271 documentation radio button

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

@@ -7,6 +7,8 @@ import RadioButtonAnatomy from '../../../public-storybook/images/radio-button/ra
 import RadioButtonGroupBlock from '../../../public-storybook/images/radio-button/radio-button-group-block.png';
 import RadioButtonGroupInline from '../../../public-storybook/images/radio-button/radio-button-group-inline.png';
 import RadioButtonStates from '../../../public-storybook/images/radio-button/radio-button-states.png';
+import RadioButtonMouseInteraction from '../../../public-storybook/images/radio-button/radio-button-mouse-interaction.png';
+import RadioButtonOverflowText from '../../../public-storybook/images/radio-button/radio-button-overflow-text.png';
 
 <Meta of={RadioButtonStories} /> 
 # Radio Button
@@ -23,33 +25,46 @@ The radio component is used to allow users to select a single option from a pred
 - If the options are independent and not mutually exclusive, checkboxes should be used instead.
 
 ## Anatomy
-<img src={RadioButtonAnatomy} alt="Radio Button anatomy" />
-**Radio Button input (1)** A radio button indicating the appropriate state. By default an option is selected. In some UX cases it is also possible to let the state unselected.
+<img src={RadioButtonAnatomy} alt="Radio Button anatomy" width="50%"/>
+**Radio Button input (1)**\
+A radio button indicating the appropriate state. By default an option is selected. In some UX cases it is also possible to let the state unselected.
 
 
-**Radio Button label (2)** Provides an information you want to select or unselect.
+**Radio Button label (2)**\
+Provides an information you want to select or unselect.
 
-## Sizes
+## Size
 The radio button component in our design system is available in two different sizes: 20px and 24px. These sizes are designed to provide flexibility and meet various design requirements.
 <img src={RadioButtonSizes} alt="Radio Button sizes" />
 
 ## Grouping radio buttons
 Deciding whether to place radio buttons in an inline or block layout depends on the specific context and requirements of your user interface.
 
 ### Inline
-<img src={RadioButtonGroupInline} alt="Radio Button grouping inline" />
+<img src={RadioButtonGroupInline} alt="Radio Button grouping inline" width="50%" />
 
 - Use to save space when you have limited screen real estate or need to place other elements alongside the radio buttons. 
 - Use when the options in your radio button group have short labels, an inline layout can provide a more compact and visually streamlined presentation. 
 - Use to visually group related options or indicate that they belong to the same category.
 
 ### Block
-<img src={RadioButtonGroupBlock} alt="Radio Button grouping block" />
+<img src={RadioButtonGroupBlock} alt="Radio Button grouping block" width="50%" />
 
 - Use for long radio button labels. 
 - Use to easily scan and compare the options from top to bottom. 
 - Use to visually separate radio button options.
 
+## Mouse interaction
+To select the radio button, users have two options: they can either directly click on the radio button or click on the label.
+<img src={RadioButtonMouseInteraction} alt="Radio Button mouse interaction" width="50%" />
+
+## Overflow content
+When the content associated with a radio button option is too long or exceeds the available space, it can lead to an overflow scenario. In that case the long labels may wrap to a second line.
+<img src={RadioButtonOverflowText} alt="Radio Button overflow content" width="50%" />
+
 ## States
 <img src={RadioButtonStates} alt="Radio Button states" />
 
+***
+Check out the Figma component: **[Radio Button](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=2583-7344&mode=design&t=qlLaDC1ToCwXyreQ-4)**
+***