Buttons

How buttons and related UI elements are displayed and used on the OfferPad website.

Normal buttons

<button type="button" class="c-button c-button--primary">Primary</button>
<button type="button" class="c-button c-button--special">Special</button>
<button type="button" class="c-button c-button--success">Success</button>
<button type="button" class="c-button c-button--warning">Warning</button>
<button type="button" class="c-button c-button--danger">Danger</button>

Active state

<button type="button" class="c-button c-button--primary is-active">Primary</button>
<button type="button" class="c-button c-button--special is-active">Special</button>
<button type="button" class="c-button c-button--success is-active">Success</button>
<button type="button" class="c-button c-button--warning is-active">Warning</button>
<button type="button" class="c-button c-button--danger is-active">Danger</button>

Disabled state

<button type="button" class="c-button c-button--primary" disabled>Primary</button>
<button type="button" class="c-button c-button--special" disabled>Special</button>
<button type="button" class="c-button c-button--success" disabled>Success</button>
<button type="button" class="c-button c-button--warning" disabled>Warning</button>
<button type="button" class="c-button c-button--danger" disabled>Danger</button>

Outline buttons

<button type="button" class="c-button c-button-outline--primary">Primary</button>
<button type="button" class="c-button c-button-outline--special">Special</button>
<button type="button" class="c-button c-button-outline--success">Success</button>
<button type="button" class="c-button c-button-outline--warning">Warning</button>
<button type="button" class="c-button c-button-outline--danger">Danger</button>

Active state

<button type="button" class="c-button c-button-outline--primary is-active">Primary</button>
<button type="button" class="c-button c-button-outline--special is-active">Special</button>
<button type="button" class="c-button c-button-outline--success is-active">Success</button>
<button type="button" class="c-button c-button-outline--warning is-active">Warning</button>
<button type="button" class="c-button c-button-outline--danger is-active">Danger</button>

Disabled state

<button type="button" class="c-button c-button-outline--primary" disabled>Primary</button>
<button type="button" class="c-button c-button-outline--special" disabled>Special</button>
<button type="button" class="c-button c-button-outline--success" disabled>Success</button>
<button type="button" class="c-button c-button-outline--warning" disabled>Warning</button>
<button type="button" class="c-button c-button-outline--danger" disabled>Danger</button>

Button sizes

<button type="button" class="c-button c-button--primary c-button--small">Small</button>
<button type="button" class="c-button c-button--primary">Normal</button>
<button type="button" class="c-button c-button--primary c-button--large">Large</button>

Arrow buttons

<button type="button" class="c-button c-button--primary c-button--arrow-left">Previous</button>
<button type="button" class="c-button c-button--primary c-button--arrow-right">Next</button>

Progress buttons

<button type="button" class="c-button c-button--primary c-button--progress">Submitting...</button>