top of page






Design System

Button alignment and ordering

I delved into the comparative review of Design Systems, and one notable focal point emerged—button grouping. Many designers seek clearer guidance on arranging buttons, like the positioning of "Next" and "Cancel." Questions arise: left and right, right and left, or perhaps right and underneath? This dilemma extends to other scenarios, be it the sequence of "Back" and "Next" in straightforward transactions, modals, or handling impactful actions like deleting an account.
The primary objective of this project is to offer guidance exclusively, placing a heightened emphasis on practical examples of usage.
I ran into a bunch of issues working on this project, mainly with buttons not lining up the same way across different teams. We definitely need to figure out a solution for where and how buttons should be aligned and ordered.
Frame 1.png
Learning from other design systems

I love studying how big companies design things. Microsoft, Atlassian, and even the US and UK governments have these amazing design systems. I watch videos from Nielsen Norman too. They're like guides for making things look good and work well. While adopting elements that resonate with our specific needs, these experiences have been instrumental in crafting a design framework that seamlessly aligns with our project goals.

image 8 (1).png

The order of grouped buttons differs depending on which type of layout we are designing.  The most important thing we must consider for button grouping and ordering is that we are consistent with how they are placed.

There are two distinct patterns when it comes to the placement of buttons:

  • F-pattern 

  • Z-pattern.
    Button order preference changes between form page layouts and cards, versus modals, progress steppers and dialogue boxes. 


We left-align button groups in forms and cards.

Users scan page-level content in an “F” flow and because most of the page content is already left-aligned. 

Aligning a prominent primary action with the path to completion (directly below the last question answered) lets people know they can and should move forward.

Frame 477.png

Order the buttons primary-to-secondary, from left-to-right. 
Rationale: this follows the “natural” reading order (for western-languages) and increases the completion rate.

Screenshot 2023-09-30 at 3.22.25 pm.png

Destructive alternative

Use a secondary action as a link style button to clearly distinguish it from the primary destructive action such as Delete account. This has been proven to reduce interactions in error. If presented as a standard button type, they often get clicked in error. 

Screenshot 2023-10-02 at 4.07.35 pm.png
Progress stepper, modals and dialogue boxes

Align the buttons to the right and primary on the right.
There is a difference in how our eyes scan information when viewing information contained in progress steppers, modals and dialogue boxes. This is called the “Z” pattern (see the “Gutenberg Diagram”). When we ask a user to progress through a series of steps or we are using a modal to grab their attention, the primary action traditionally sits at the bottom right. Placing the primary button last improves the flow because the layout "ends" with its conclusion. 

Progess stepper

There are two options to consider using when placing the button groups in progress steppers (with the primary on the right on both occasions):

  • close together and right-aligned

Screenshot 2023-10-02 at 4.14.32 pm.png
  • Or either side of the page.

Screenshot 2023-10-02 at 4.14.56 pm.png
Modals and dialogs
Screenshot 2023-10-02 at 4.13.23 pm.png

In 2021, these guidelines were released. These guidelines have been super useful for designers, making sure buttons line up right in all kinds of layouts. Plus, they've kept things looking consistent in SNSW designs. It's been a real game-changer!

bottom of page