diff --git a/elements/rh-button/docs/20-guidelines.md b/elements/rh-button/docs/20-guidelines.md index d2c7ca7d6a..800a6fcd7a 100644 --- a/elements/rh-button/docs/20-guidelines.md +++ b/elements/rh-button/docs/20-guidelines.md @@ -245,58 +245,146 @@ buttons. If buttons are stacked, the spacing between each button should be ## Best practices -### More than one line of text - -Buttons should never have more than one line of text. - - - Image of a button with two lines of text which is incorrect usage - - -### Multiple buttons - -Do not use multiple Danger or Primary buttons in the same area. - - - Image of two danger and two primary button groups which is incorrect usage - +### Lines of text + +
+ + + Button with 'Add item' text on one line + +

Keep the button’s text on one line.

+ + + + + Button with 'Add item' text breaking to two lines + +

Do not use more than one line of text.

+ +
+ +### Variants in button groups + +
+ + + Button group with a primary button and a secondary button and another button group with a danger button and a link button + +

Use one primary or primary danger button per button group.

+ + + + + Button group with two primary buttons and a second button group with two primary danger buttons + +

Do not use multiple primary or primary danger buttons in the same button group.

+ +
### Text labels -Do not write button text labels that are expressive or ambiguous. - - - Image of two buttons; one has expressive language and the other has ambiguous language which is incorrect usage - +
+ + + Secondary button with 'Edit' text and primary button with `Submit` text + +

Label buttons clearly and succinctly.

+ + + + + Secondary button with 'Click here' text and primary button with 'Submit now!' text + +

Do not write button text labels that are expressive or ambiguous.

+ +
### Danger button -Do not use a Danger button for non-destructive purposes. - - - Image of a search bar using a danger button which is incorrect usage - - -### Button as a call to action - -Do not use buttons as links or change the Primary button styling, use a link or -call to action instead. - - - Image of text styles with a button underneath that resembles a call to action which is incorrect usage - +
+ + + Danger button labeld 'Reset layout' below explanatory copy and next to a 'Cancel' link button + +

Use a danger button for destructive actions only.

+ + + + + Danger button labeled 'Search' next to a text input field + +

Do not use a danger button for non-destructive actions.

+ +
+ +### Buttons vs. calls to action + +
+ + + Blue primary button below supporting copy + +

Use buttons for actions, and retain the primary button styling to make them look different from calls to action.

+ + + + + Brand red primary button below supporting copy + +

Do not use buttons as links or change the style of a primary button to look more like a call to action.

+ +
+ +### Button icons + +
+ + + Button with one icon to the left of the text + +

Use only one icon in a button.

+ + + + + Button with icons to the left and right of the text + +

Do not use more than one icon in a button.

+ +
\ No newline at end of file diff --git a/elements/rh-button/docs/button-best-practice-1.png b/elements/rh-button/docs/button-best-practice-1.png deleted file mode 100755 index da09639eac..0000000000 Binary files a/elements/rh-button/docs/button-best-practice-1.png and /dev/null differ diff --git a/elements/rh-button/docs/button-best-practice-2.png b/elements/rh-button/docs/button-best-practice-2.png deleted file mode 100755 index f153f30b7b..0000000000 Binary files a/elements/rh-button/docs/button-best-practice-2.png and /dev/null differ diff --git a/elements/rh-button/docs/button-best-practice-3.png b/elements/rh-button/docs/button-best-practice-3.png deleted file mode 100755 index ced4e792e4..0000000000 Binary files a/elements/rh-button/docs/button-best-practice-3.png and /dev/null differ diff --git a/elements/rh-button/docs/button-best-practice-4.png b/elements/rh-button/docs/button-best-practice-4.png deleted file mode 100755 index 3b0e7129d1..0000000000 Binary files a/elements/rh-button/docs/button-best-practice-4.png and /dev/null differ diff --git a/elements/rh-button/docs/button-best-practice-5.png b/elements/rh-button/docs/button-best-practice-5.png deleted file mode 100755 index e1cbc4e76a..0000000000 Binary files a/elements/rh-button/docs/button-best-practice-5.png and /dev/null differ diff --git a/elements/rh-button/docs/button-best-practices-buttons-vs-ctas-do.svg b/elements/rh-button/docs/button-best-practices-buttons-vs-ctas-do.svg new file mode 100644 index 0000000000..38b2021799 --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-buttons-vs-ctas-do.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-buttons-vs-ctas-dont.svg b/elements/rh-button/docs/button-best-practices-buttons-vs-ctas-dont.svg new file mode 100644 index 0000000000..5c321bbe3a --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-buttons-vs-ctas-dont.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-danger-do.svg b/elements/rh-button/docs/button-best-practices-danger-do.svg new file mode 100644 index 0000000000..294100fbd7 --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-danger-do.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-danger-dont.svg b/elements/rh-button/docs/button-best-practices-danger-dont.svg new file mode 100644 index 0000000000..9ed352d56d --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-danger-dont.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-icons-do.svg b/elements/rh-button/docs/button-best-practices-icons-do.svg new file mode 100644 index 0000000000..a8a4eddcbb --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-icons-do.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-icons-dont.svg b/elements/rh-button/docs/button-best-practices-icons-dont.svg new file mode 100644 index 0000000000..28a60f453b --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-icons-dont.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-labels-do.svg b/elements/rh-button/docs/button-best-practices-labels-do.svg new file mode 100644 index 0000000000..0eb988e096 --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-labels-do.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-labels-dont.svg b/elements/rh-button/docs/button-best-practices-labels-dont.svg new file mode 100644 index 0000000000..8e2659decd --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-labels-dont.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-text-lines-do.svg b/elements/rh-button/docs/button-best-practices-text-lines-do.svg new file mode 100644 index 0000000000..2603d4de22 --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-text-lines-do.svg @@ -0,0 +1,4 @@ + + + + diff --git a/elements/rh-button/docs/button-best-practices-text-lines-dont.svg b/elements/rh-button/docs/button-best-practices-text-lines-dont.svg new file mode 100644 index 0000000000..9af86de780 --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-text-lines-dont.svg @@ -0,0 +1,4 @@ + + + + diff --git a/elements/rh-button/docs/button-best-practices-variants-in-groups-do.svg b/elements/rh-button/docs/button-best-practices-variants-in-groups-do.svg new file mode 100644 index 0000000000..80248e7f0f --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-variants-in-groups-do.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/elements/rh-button/docs/button-best-practices-variants-in-groups-dont.svg b/elements/rh-button/docs/button-best-practices-variants-in-groups-dont.svg new file mode 100644 index 0000000000..24fd360001 --- /dev/null +++ b/elements/rh-button/docs/button-best-practices-variants-in-groups-dont.svg @@ -0,0 +1,10 @@ + + + + + + + + + +