Buttons

Buttons pattern

Open this buttons pattern default example in a new tab
HTML
<form class="occlss-form">
  <nav class="occlss-form__controls occlss-u-bspace-large" role="navigation">
    <ul class="occlss-form__listitems">
      <li class="occlss-form__controls-list-item occlss-form__controls-list-item--spaced">
        <button type="submit" class="occlss-button occlss-button--neutral">
          Back
        </button>
      </li>
      <li class="occlss-form__controls-list-item">
        <button type="submit" class="occlss-button occlss-button--primary">
          Continue
        </button>
      </li>
    </ul>
  </nav>
</form>

When to use this component

Buttons are used in this pattern for navigation on forms. The buttons are spaced to make it easier for a user to tell them apart and helps to prevent the user from clicking on the wrong button by mistake.

Changelog

2.5.1

  • Primary button colours changes

2.5.0

  • Primary button outline and hover colour changed

1.0.0

  • Component Added