kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases 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
Show stats 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-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) | | 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
--- ---