Button alignment

pattern left right

Introduction

This guideline helps to decide whether to place buttons on the left or right. There are two distinct patterns and the alignment is dependent on the purpose of the button. These patterns only apply to buttons that are not within an independent component (e.g. confirmation dialog, stepper,...).

Button on the right

The buttons should always be on the right hand side if the user is taken to a different page after clicking a button. The placement indicates that the user will move on from this page.

Scenarios for this pattern would be:

  • A button that drills down to more details
  • A save button that continues a workflow
  • A cancel button that will bring you back to a different page

Action pattern

Button on the left

If the buttons execute an action the button should be placed on the left. A lot of these actions are within the flow of the content and depend on the context.

Scenarios for this pattern would be:

  • Download buttons
  • A button that will update your information
  • A button that adds a tablerow