Styleguide

Progress Selector

The progress selector is a series of chevron styled buttons designed to model a progression or series of advancing states.

A good example usage is the candidate's offer status. See _progress_selector.haml and ivr_updater.js

Default

.progress
  .progress-selector
    %button.button.button--black.thin{disabled: "disabled"}
      %span.button-text.text-medium
        %span
          Stage 1
    %button.button.button--secondary.thin
      %span.button-text.text-medium
        %span
          Stage 2
    %button.button.button--secondary.thin{disabled: "disabled"}
      %span.button-text.text-medium
        %span
          Stage 3

<div class='progress'>
  <div class='progress-selector'>
    <button class='button button--black thin' disabled='disabled'>
      <span class='button-text text-medium'>
        <span>
          Stage 1
        </span>
      </span>
    </button>
    <button class='button button--secondary thin'>
      <span class='button-text text-medium'>
        <span>
          Stage 2
        </span>
      </span>
    </button>
    <button class='button button--secondary thin' disabled='disabled'>
      <span class='button-text text-medium'>
        <span>
          Stage 3
        </span>
      </span>
    </button>
  </div>
</div>