-
Use at the bottom of forms to demarcate the end of the form and highlight the call to action (save, update, next, etc.).
-
Use the default variation to associate two buttons together (previous/next, save/cancel, etc.).
-
Use the slim variation when there is only one button.
-
Use the slim, left-aligned variation in edge cases when there is only one button and content is weighted towards the left. The button bar doesn't always adhere to the input max-width and thus can float far to the right, potentially creating issues for users pointing to the right-aligned button (See Fitts's Law).
Do not use this variation if using the other button-bar variations within a flow. Using this variation is allowed at the start or end of a flow, however don't switch variations mid-stream.