Button Patterns

Buttons are one of the most important components in a layout, and it is important to standardise the way buttons are displayed, the way they are placed and how they behave.

Button Order

Buttons should always be placed in this order
 
  
 
The primary action in this case is Save and Continue, so the button is placed on the right hand side. The secondary action is Cancel and the button is placed on the left hand side.
 
If there are more than two buttons, the most important button should always be placed in the far right hand side, like the example below. As a general rule, there should only be one main button to easily identify the most common action.
 
     
 

One Button - Primary Action

As a standard, if there is just one button always add the primary action style .euaa-btn--primary
 
 

One Button - Secondary Action

The only exception to this rule is when we have a secondary action, like Cancel or Close, in this case it should always be displayed with the secondary action style .euaa-btn--secondary