docs: form and button guidance updates (#3722)

* docs: form and button guidance updates

* updated images

* fixed broken images

* update images with instructions

* Update index.mdx

---------

Co-authored-by: Lauren Rice <[email protected]>
Co-authored-by: Andrea N. Cardona <[email protected]>

src/pages/components/button/usage.mdx

@@ -376,7 +376,7 @@ Button groups are a useful way of aligning buttons that have a relationship.
 Group the buttons logically into sets based on usage and importance. Too many
 calls to action will overwhelm and confuse users so they should be avoided.
 
-As mentioned in the [Emphasis section](#Emphasis), you don’t necessarily need to
+As mentioned in the [Emphasis section](#emphasis), you don’t necessarily need to
 use the buttons in the order that their labels imply. Either a secondary or a
 tertiary button can be used in conjunction with a primary button. In fact, due
 to the visual weight of the secondary button, it’s recommended to use tertiary
@@ -458,7 +458,7 @@ container with a programmatic 16px gutter between them.
 #### Horizontally arranged groups
 
 When using multiple buttons, the position of the primary button adheres to the
-[alignment guidance](#Alignment) above. To sum up, a primary button will be
+[alignment guidance](#alignment) above. To sum up, a primary button will be
 left-aligned and positioned to the left of the secondary/tertiary button on
 full-page designs. The primary button will be right-aligned and appear to the
 right of the secondary/tertiary button within wizards and dialog windows.

src/pages/patterns/forms-pattern/index.mdx

@@ -66,7 +66,7 @@ Forms are comprised of some or all of the following elements.
 <Row>
 <Column colLg={8}>
 
-![Basic form with anatomy callouts](/images/Elements.png)
+![Basic form with anatomy callouts](/images/form-usage-1.png)
 
 </Column>
 </Row>
@@ -467,31 +467,35 @@ information.
 #### Button emphasis
 
 Emphasis refers to the position of the primary button in relation to secondary
-and tertiary actions. When using multiple buttons, the primary button appears to
-the right and any secondary buttons appear to the left.
-[Research](https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/) has shown
-that performance differences between secondary and primary button placement are
-negligible, however maintaining consistency throughout a product, offering, or
-platform is crucial. The Secondary / Primary button order (secondary to the left
-and primary to the right) is therefore our required guidance and should be
-followed at all times.
+and tertiary actions. When using multiple buttons in forms, the position of the
+primary button can vary according to the
+[button groups](/components/button/usage/#button-groups) guidance. Factors such
+as page layout, form type, and alignment will influence your button emphasis.
+
+The primary button will be left-aligned and positioned to the left of the
+secondary/tertiary button on in-page forms or most other form layouts that don’t
+fit the right-aligned criteria. The primary button will be right-aligned and
+appear to the right of the secondary/tertiary button within progressive forms,
+wizards, and forms in structured containers like dialog windows or side panels.
 
 <Row>
 <Column colLg={8}>
 
-![Example of dedicated page forms](/images/dedicated_pg_buttons.png)
+![Examples of form with a left-aligned primary button](/images/form-buttons-primary-left.png)
 
-<Caption>Example of dedicated page forms</Caption>
+<Caption>Examples of in-page forms with a left-aligned primary button</Caption>
 
 </Column>
 </Row>
 
 <Row>
 <Column colLg={8}>
 
-![Dialog and side-panel forms](/images/dialog_and_panel_buttons.png)
+![Examples of form with a right-aligned primary button](/images/form-buttons-primary-right.png)
 
-<Caption>Dialog and side-panel forms</Caption>
+<Caption>
+  Examples of progressive and dialog forms with a right-aligned primary button
+</Caption>
 
 </Column>
 </Row>