Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Progress toggle

The function of the toggle buggle button is to motivate learners to progress through the course and to allow them track their progress. The button has three states – incomplete, loading, and complete in addition to the standard interactive states.

We use this button to achieve the following goals:

  • to allow a user to submit an action, e.g. complete a step;
  • to communicate that the submitted action is in progress through the pulsing animation;
  • to show when the action has completed successfully, and;
  • to allow the user to undo their submitted action.
.m-progress-toggle-btn-container
  .m-progress-toggle-btn
    %button.m-progress-toggle-btn__trigger
      %span.m-progress-toggle-btn__label Mark as complete

.m-progress-toggle-btn-container
  .m-progress-toggle-btn.m-progress-toggle-btn--complete
    %button.m-progress-toggle-btn__trigger
      %span.m-progress-toggle-btn__label Undo

    %svg{ class:"m-progress-toggle-btn__tick", xmlns:"http://www.w3.org/2000/svg", viewBox:"0 0 37 31.3" }
      %path{ fill:"#fff", d:"M31.2 2.3L12.4 21.9l-7-6.7L2 18.7l10.6 10.2L34.7 5.8z" }