---
title: Buttons
section-title: UI Components
docs: true

navgroup: styleguide
navsub: ui-components
navactive: buttons
---

<h2 class="sg-sectionHeading">Default Button – <code>.o-btn</code></h2>
{{#>demo-block }}
{{> je-btn-simple text='Button' classname='o-btn' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Button Background Color Modifiers</h2>
{{#>demo-block }}
{{> je-btn-simple text='Button Primary' classname='o-btn o-btn--primary' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Button secondary and tertiary Modifiers</h2>
<p>The secondary button must be used on white background and the tertiary on grey.</p>
{{#>demo-block }}
{{> je-btn-simple text='Button Secondary' classname='o-btn o-btn--secondary' }}
{{> je-btn-simple text='Button Tertiary' classname='o-btn o-btn--tertiary' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Block Button – <code>.o-btn.o-btn--block</code></h2>
{{#>demo-block }}
{{> je-btn-simple text='Button Block' classname='o-btn o-btn--block' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Button Link – <code>.o-btnLink</code></h2>
<p>Make a button visually look like a default link.  Useful when we semantically want a button but don’t want all the default styling.</p>
<p>Should only be applied to buttons</p>
{{#>demo-block }}
{{> je-btn-simple text='Button Link' classname='o-btnLink' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Outline Button – <code>.o-btn.o-btn--outline</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-simple text='Button Outline' classname='o-btn o-btn--outline' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Transparent Button – <code>.o-btn.o-btn--transparent</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-simple text='Button Transparent' classname='o-btn o-btn--transparent' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Small Button – <code>.o-btn.o-btn--small</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-simple text='Button Small' classname='o-btn o-btn--small' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Disabled Button – <code>.o-btn.o-btn--disabled</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-simple text='Button Disabled' classname='o-btn o-btn--disabled' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Rounded Icon Button – <code>.o-btn.o-btn--roundedIcon</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-simple classname='o-btn o-btn--roundedIcon c-icon--minus' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Small rounded Icon Button – <code>.o-btn.o-btn--roundedIcon.o-btn--roundedIcon--small</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-simple classname='o-btn o-btn--roundedIcon o-btn--roundedIcon--small c-icon--minus' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Rounded Button – <code>.o-btn.o-btn--rounded</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-simple text='+' classname='o-btn o-btn--rounded' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Remove Button – <code>.o-btn.o-btn--remove</code></h2>
{{#>demo-block }}
{{> je-btn-simple text='-' classname='o-btn o-btn--remove' }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Button Group – <code>.o-btn-group .o-btn</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-group }}
{{/demo-block }}


<h2 class="sg-sectionHeading">Button Toggle – <code>.o-btnToggle</code></h2>
<p></p>
{{#>demo-block }}
{{> je-btn-toggle }}
{{/demo-block }}