summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAchilleas Pipinellis <axilleas@axilleas.me>2017-02-04 09:14:13 +0000
committerAchilleas Pipinellis <axilleas@axilleas.me>2017-02-04 09:14:13 +0000
commit9c49a1812aaa7e858295be5abbf9e1a7c1346699 (patch)
tree6c928fd71528da3cb804d58704cfb9edcfcf4816
parent7b70014d5df18764fea387fe9576fac711a6f849 (diff)
parent186e60f2e74305ef476299e558a17014bdc37d2c (diff)
downloadgitlab-ce-9c49a1812aaa7e858295be5abbf9e1a7c1346699.tar.gz
Merge branch 'ux-guide-button-placement' into 'master'
UX Guide: Button placement in groups See merge request !8972
-rw-r--r--doc/development/ux_guide/components.md14
1 files changed, 14 insertions, 0 deletions
diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md
index 1b19587a0b8..18d0647c798 100644
--- a/doc/development/ux_guide/components.md
+++ b/doc/development/ux_guide/components.md
@@ -96,6 +96,20 @@ Since secondary buttons only have a border on their resting state, their hover a
| Background: `$color-light` <br> Border: `$border-color-light` | ![](img/button-success-secondary--hover.png) | ![](img/button-close--hover.png) | ![](img/button-spam--hover.png) |
| Background: `$color-normal` <br> Border: `$border-color-normal` | ![](img/button-success-secondary--active.png) | ![](img/button-close--active.png) | ![](img/button-spam--active.png) |
+### Placement
+
+When there are a group of buttons in a dialog or a form, we need to be consistent with the placement.
+
+#### Dismissive actions on the left
+The dismissive action returns the user to the previous state.
+
+> Example: Cancel
+
+#### Affirmative actions on the right
+Affirmative actions continue to progress towards the user goal that triggered the dialog or form.
+
+> Example: Submit, Ok, Delete
+
---