Add Confirm button variant
Note: In !1935 (diffs) the button name has changed from affirm → confirm. Any mentions below of “affirm” reference the “confirm” button in the MR.
Purpose
After much exploration and testing we’re moving forward with the proposal in gitlab-design#1263 (closed) to minimize button variants.
This comes with the benefits of:
- Reducing clutter in the UI where many button variants are currently present in the same context.
- Ensuring button combinations are accessible. Today the orange and green buttons used together are problematic for red/green color blindness.
- Focusing more on the level and hierarchy of actions, not the meaning (which can sometimes be very subjective).
- Many additional benefits are referenced in the issue linked above.
The proposal is to introduce a new affirm button variant that is essentially a duplicate of our current info (blue) button. Simply swapping the name would have downstream impacts, so by adding the new variant we can slowly roll out the changes.
The “affirm” button name comes from wanting to avoid color or other meaning association and connecting this with the action that is affirmative in the context its placed. Actions can be positive or negative, and so long as the action affirms what the user wants to happen it can be used.
The affirm button will have primary, secondary, and tertiary variants same as buttons do today.
The danger variant will remain and be specifically used when a destructive, irreversible action is primary.
The eventual set will be:
This change has already been made in Figma →.