Button group

Button groups are used for displaying groups of buttons that perform related actions in a horizontal row. On mobile devices, the buttons are stacked vertically.

<div class="sba-c-button-group">
  <button type="button" class="sba-c-button sba-c-button--transparent sba-c-button--big">
    Cancel
  </button>
  <button type="submit" class="sba-c-button sba-c-button--big">
    Add note & continue
  </button>
  <button type="submit" class="sba-c-button sba-c-button--inverse sba-c-button--big">
    Skip
  </button>
</div>

Guidance

Space buttons evenly
Create a clear distinction between a primary action and secondary action
Consider icons in buttons for extra affordance
Back buttons should be placed towards the top of the page since that is when users would most likely want to go back
If a skip button is present, avoid using verbs such as "Continue" by itself ("Add note & continue" is acceptable) as well as any icons that convey forward motion on the primary action.
Button groups may contain a single button
Primary actions can be the default button design, as well as sba-c-button--success or sba-c-button--danger
Cancel actions should use sba-c-button--transparent
Skip actions should use sba-c-button--inverse

When to consider something else

More than three buttons are needed