VladPolskiy/gitlabhq
1
0
Fork 0
mirror of https://github.com/gitlabhq/gitlabhq.git synced 2025-08-20 16:30:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ci skip] UX Guide: Button placement in groups

Browse Source
This commit is contained in:
Allison Whilden
2017-02-03 15:08:20 -08:00
parent 575aea54e4
commit 186e60f2e7
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
doc/development/ux_guide/components.md
View File

@ -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
---