Heartwood

Button Variations 

<!-- Default -->
<button class="btn btn-primary btn-full-width " type="button">
		<span class="btn__inner">
				<span class="btn__text">Full Width Buttons</span>
			
		</span>	
</button>


<!-- Primary Small -->
<button class="btn btn-primary btn-small btn-full-width " type="button">
		<span class="btn__inner">
				<span class="btn__text">Full Width Buttons</span>
			
		</span>	
</button>


<!-- Secondary -->
<button class="btn btn-secondary btn-full-width " type="button">
		<span class="btn__inner">
				<span class="btn__text">Full Width Buttons</span>
			
		</span>	
</button>


<!-- Secondary Small -->
<button class="btn btn-secondary btn-small btn-full-width " type="button">
		<span class="btn__inner">
				<span class="btn__text">Full Width Buttons</span>
			
		</span>	
</button>


{{> @button }}
 
/* Default */
{
  "text": "Full Width Buttons",
  "className": "btn-primary btn-full-width",
  "type": "button"
}


/* Primary Small */
{
  "text": "Full Width Buttons",
  "className": "btn-primary btn-small btn-full-width",
  "type": "button"
}


/* Secondary */
{
  "text": "Full Width Buttons",
  "className": "btn-secondary btn-full-width",
  "type": "button"
}


/* Secondary Small */
{
  "text": "Full Width Buttons",
  "className": "btn-secondary btn-small btn-full-width",
  "type": "button"
}

Full Width Buttons

Any button can be made full width by adding the class .btn-full-width