diff --git a/packages/react/.storybook/main.cjs b/packages/react/.storybook/main.cjs index a89af0f..58eb6cc 100644 --- a/packages/react/.storybook/main.cjs +++ b/packages/react/.storybook/main.cjs @@ -20,6 +20,7 @@ module.exports = { }, staticDirs: [ 'dist', + '../src' ], "features": { "storyStoreV7": true diff --git a/packages/react/src/components/Button/index.stories.mdx b/packages/react/src/components/Button/index.stories.mdx index 12dc759..1af6446 100644 --- a/packages/react/src/components/Button/index.stories.mdx +++ b/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 | \ No newline at end of file +| 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. + + + +### 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 + + + +### 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. + + + +### Exceptional red button for delete + +Secondary button to be used when important non-reversible action surrounded by red. + + \ No newline at end of file diff --git a/packages/react/src/components/Button/resources/dd_1.svg b/packages/react/src/components/Button/resources/dd_1.svg new file mode 100644 index 0000000..4414651 --- /dev/null +++ b/packages/react/src/components/Button/resources/dd_1.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/src/components/Button/resources/dd_2.svg b/packages/react/src/components/Button/resources/dd_2.svg new file mode 100644 index 0000000..0949200 --- /dev/null +++ b/packages/react/src/components/Button/resources/dd_2.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/src/components/Button/resources/dd_3.svg b/packages/react/src/components/Button/resources/dd_3.svg new file mode 100644 index 0000000..3a348c1 --- /dev/null +++ b/packages/react/src/components/Button/resources/dd_3.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/src/components/Button/resources/dd_4.svg b/packages/react/src/components/Button/resources/dd_4.svg new file mode 100644 index 0000000..b53b7cf --- /dev/null +++ b/packages/react/src/components/Button/resources/dd_4.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +