📝(react) add do's and don't to Button doc

Based on the work delivered by designers, we simply replicates those
in the storybook documentation in order to centralize everything
related to the Button component.

packages/react/.storybook/main.cjs

@@ -20,6 +20,7 @@ module.exports = {
   },
   staticDirs: [
     'dist',
+    '../src'
   ],
   "features": {
     "storyStoreV7": true

packages/react/src/components/Button/index.stories.mdx

@@ -63,4 +63,33 @@ Here a the custom design tokens defined by the button.
 | border-radius 	| Border radius of the button 	|
 | height        	| Height of the button        	|
 | font-size     	| Font size of the label      	|
-| font-weight   	| Font weight of the label    	|
+| font-weight   	| Font weight of the label    	|
+
+## Do's and don'ts
+
+### Never use two "filled buttons" or "primary buttons" on the same page for two main actions.
+
+The primary button designates the user's primary action, it is highlighted here with a primary color.
+The primary button should not be used for a secondary action.
+
+<img src="components/Button/resources/dd_1.svg"/>
+
+### Size of icons in a primary MD button
+
+When you go to change the icon in the properties by browsing the icon library, you must choose only icons a size of 24x24px
+to respect the size of the container
+
+<img src="components/Button/resources/dd_2.svg"/>
+
+### Good practice for primary, secondary and tertiary button
+
+For a good practice we use only one primary button per page to define the main action with 1/3 of secondary buttons and as
+many tertiary buttons as needed.
+
+<img src="components/Button/resources/dd_3.svg"/>
+
+### Exceptional red button for delete
+
+Secondary button to be used when important non-reversible action surrounded by red.
+
+<img src="components/Button/resources/dd_4.svg"/>