We should work towards a standard approach to placement and usage of the Save and Cancel buttons throughout the codebase. This is an approach that can be realized over time. A form generally has 2 main buttons, a form submission button and a button to cancel the action. See the following recommendations
- Form submission button MUST be a
<button>element; and - Form submission button MUST have classes of
.btn-primaryand.btn-save; and - Form submission button MUST not have a class of
.btn-secondaryor.btn-link; and - Form cancel button MUST be an
<button>element; and - Form cancel button MUST have a class of
.btn-linkapplied; and - For LTR languages, Form submission button MUST be to the right of the Form cancel button; and
- For RTL languages, Form submission button MUST be to the left of the Form cancel button; and
- A form MUST have only one button styled with a class of
.btn-primary
That’s a lot of bullet points but basically it just means that this should be the template:
<div class="d-flex w-100 justify-content-end">
<button type="button" class="btn btn-link">Cancel</button>
<button type="submit" class="btn btn-primary btn-save">Save</button>
</div>
Other things on my mind related to this:
- Right now
.btn-canceladds an icon to the element. Should we consider making a that utility class a first class citizen in the world of button (As the same as btn-primary, btn-secondary, btn-link, btn-danger, etc). This would allow to differentiate the de-emphisis process between a cancel button and other link elements that do not necessarily cancel an action but still should be de-emphasized. My thought is yes, we should do this.