Buttons in Settings > Integrations don't follow Pajamas guidelines for buttons
Problem to solve
Currently, the "Cancel" and "Save" buttons in Settings > Integrations pages follow the opposite pattern of what Pajamas recommends.
Wrong positioning: Positive and negative actions are on opposite sides, positive (primary) is on the left | Another example |
---|---|
Pajamas guidelines recommend:
Order
Buttons are ordered by importance from right to left. This means primary buttons are always on the right followed by secondary buttons, and so on. As an effect it means buttons with dismissive actions are on the left and buttons with affirmative actions are on the right. Depending on the context, the primary, affirmative action may be destructive.
Positioning
Buttons are positioned towards the right and are placed next to each other when there are multiple. This applies to buttons with affirmative, dismissive, and destructive actions.
An exception to this rule is the use of buttons in alerts, which are always left-aligned.
Please note to not place a button below another button if there is space to place them side by side.
https://design.gitlab.com/components/button/#order
So the positive action should be on the far right, with "Cancel" right next to it to the left.
Intended users
User experience goal
Proposal
Change the positioning of buttons to match Pajamas guidelines. Positive action, for example "Save" should be on far right, with the "Cancel" action next to it.