Button

Button main

<button class="jhlite-button-main">Button
</button>
<button class="jhlite-button-main" disabled="disabled">Button
</button>
<button class="jhlite-button-main -small">Button
</button>
<button class="jhlite-button-main -block">Button
</button>
button.jhlite-button-main Button
button.jhlite-button-main(disabled="disabled")
  | Button
button.jhlite-button-main.-small Button
button.jhlite-button-main.-block Button

Button switch

<button class="jhlite-button-switch">button-switch
</button>
<button class="jhlite-button-switch -selected">button-switch-selected
</button>
button.jhlite-button-switch button-switch
button.jhlite-button-switch.-selected button-switch-selected

Button toggle

Button toggle can display a short name by default and expand to show a full name on hover or when active.

Use the shortName and fullName properties to enable this feature:

+jhlite-button-toggle({ shortName: 'JS', fullName: 'JavaScript' })

<button class="jhlite-button-toggle">Toggle
</button>
<button class="jhlite-button-toggle -active">Toggle active
</button>
<button class="jhlite-button-toggle" disabled="disabled">Toggle disabled
</button>
<button class="jhlite-button-toggle"><span class="jhlite-button-toggle-content"><span class="jhlite-button-toggle-full-name">JavaScript</span><span class="jhlite-button-toggle-short-name">JS</span></span>
</button>
<button class="jhlite-button-toggle -active"><span class="jhlite-button-toggle-content"><span class="jhlite-button-toggle-full-name">TypeScript</span><span class="jhlite-button-toggle-short-name">TS</span></span>
</button>
<button class="jhlite-button-toggle" disabled="disabled"><span class="jhlite-button-toggle-content"><span class="jhlite-button-toggle-full-name">Cascading Style Sheets</span><span class="jhlite-button-toggle-short-name">CSS</span></span>
</button>
button.jhlite-button-toggle Toggle
button.jhlite-button-toggle.-active Toggle active
button.jhlite-button-toggle(disabled="disabled")
  | Toggle disabled
button.jhlite-button-toggle
  span.jhlite-button-toggle-content
    span.jhlite-button-toggle-full-name JavaScript
    span.jhlite-button-toggle-short-name JS
button.jhlite-button-toggle.-active
  span.jhlite-button-toggle-content
    span.jhlite-button-toggle-full-name TypeScript
    span.jhlite-button-toggle-short-name TS
button.jhlite-button-toggle(disabled="disabled")
  span.jhlite-button-toggle-content
    span.jhlite-button-toggle-full-name Cascading Style Sheets
    span.jhlite-button-toggle-short-name CSS