Update alignment.md

website/docs/patterns/button-organization/partials/guidelines/alignment.md

@@ -6,41 +6,39 @@ Alignment refers to how buttons and actions are aligned relative to the containe
 
 When considering internationalization (i18n), **start** and **end** are suitable substitutes for **left** and **right** alignment to account for languages that are read right-to-left ([RTL](https://developer.mozilla.org/en-US/docs/Glossary/RTL)).
 
-![Button alignment options](/assets/patterns/button-organization/alignment-methods.png)
+![](/assets/patterns/button-organization/alignment-methods.png)
 !!!
 
 ### Left alignment
 
-Actions are aligned to the left of the container or page. A common example of this alignment method is in [Modals](/components/modal) and page-level forms.
-
-![Left alignment example](/assets/patterns/button-organization/using-left-alignment.png)
-
-!!! Do
-
-In most scenarios, align buttons to the **left side** of a container or page.
+In most scenarios, align buttons to the **left side** of a container or page. The primary button should be leftmost, followed by secondary, then tertiary.
 
 - This reinforces natural reading patterns and a conversational "dialog-like" messaging strategy.
 - When combined with a consistent ordering method, the primary button is prioritized in the reading direction.
 - When considering different contexts, opting for a single method helps to create consistency between constrained and unconstrained components and patterns.
 
-![Button alignment reading pattern](/assets/patterns/button-organization/alignment-reading-pattern.png)
+A common example of this alignment method is in [Modals](/components/modal) and page-level forms.
+
+!!! Do
+Align buttons to the left side of the container.
+![](/assets/patterns/button-organization/alignment-reading-pattern.png)
 !!!
 
 ### Right alignment
 
-Actions are aligned to the right of the container or page. This alignment method is commonly used for page-level functions or actions that create and manage elements within a page.
+This alignment method is commonly used for page-level functions or actions that create and manage elements within a page. The primary button should be the farthest right, then secondary, then tertiary.
 
-![Right alignment example](/assets/patterns/button-organization/using-right-alignment.png)
+![Peering connections heading with a "Create connection" button right aligned to the container. A table of peering connections below.](/assets/patterns/button-organization/using-right-alignment.png)
 
 ### Center alignment
 
-Actions are aligned in the middle of the container or page. This alignment method is _not_ recommended in the majority of scenarios.
+This alignment method is _not_ recommended in the majority of scenarios.
 
 - Can cause buttons to needlessly fill the horizontal space of the container
 - Can cause buttons to appear detached from the content they are paired with, especially if a user has increased zoom settings within their browser
 
 !!! Dont
 
-![Center alignment example](/assets/patterns/button-organization/using-center-alignment.png)
+![Align buttons in the center of a form container.](/assets/patterns/button-organization/using-center-alignment.png)
 !!!