Buttons

Button sizes

<button class="btn btn--primary btn--large w-full mb-4 md:mb-0 md:w-auto">
	Large
</button>

<button class="btn btn--primary w-full mb-4 md:mb-0 md:w-auto">
	Base
</button>

<button class="btn btn--primary btn--small w-full mb-4 md:mb-0 md:w-auto">
	Small
</button>

Button styles

<button class="btn btn--primary w-full mb-4 md:mb-0 md:w-auto">
	Button primary
</button>
<button class="btn btn--outline w-full mb-4 md:mb-0 md:w-auto">
	Button outline
</button>
<button class="btn btn--text w-full mb-4 md:mb-0 md:w-auto">
	Button text
</button>
<button class="btn btn--white w-full mb-4 md:mb-0 md:w-auto">
	Button white
</button>
<button class="btn w-full mb-4 md:mb-0 md:w-auto">
	Button base
</button>

Inverted Button styles

<button class="btn btn--primary btn--inverted w-full mb-4 md:mb-0 md:w-auto">
	Button primary
</button>
<button class="btn btn--outline btn--inverted w-full mb-4 md:mb-0 md:w-auto">
	Button outline
</button>
<button class="btn btn--text btn--inverted w-full mb-4 md:mb-0 md:w-auto">
	Button text
</button>

Button States

Disabled

<button class="btn btn--primary disabled w-full mb-4 md:mb-0 md:w-auto" disabled>
	Button primary disabled
</button>
<button class="btn btn--outline disabled w-full mb-4 md:mb-0 md:w-auto" disabled>
	Button outline disabled
</button>

<button class="btn btn--primary btn--loading w-full mb-4 md:mb-0 md:w-auto">
	<div class="btn__text-container">
		<div class="btn__text">This is the button text</div>
		<div class="btn__spinner">
			<svg class="spinner" width="28px" height="28px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
				<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
			</svg>
		</div>
	</div>
</button>
<button class="btn btn--outline btn--loading w-full mb-4 md:mb-0 md:w-auto">
	<div class="btn__text-container">
		<div class="btn__text">This is the button text</div>
		<div class="btn__spinner">
			<svg class="spinner" width="28px" height="28px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
				<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
			</svg>
		</div>
	</div>
</button>

Buttons with icons

<button class="btn btn--primary w-full mb-4 md:mb-0 md:w-auto">
	<i class="fas fa-download mr-1"></i> 
	Download file
</button>

<button class="btn btn--outline w-full mb-4 md:mb-0 md:w-auto">
	<i class="far fa-file-pdf mr-1"></i> 
	Download pdf
</button>

<button class="btn btn--base w-full mb-4 md:mb-0 md:w-auto">
	<i class="far fa-file-pdf mr-1"></i> 
	Download pdf
</button>

Large variations

<button class="btn btn--primary btn--large w-full mb-4 lg:mb-0 lg:w-auto">
	<i class="fas fa-download mr-1"></i> 
	Download file
</button>

<button class="btn btn--outline btn--large w-full mb-4 lg:mb-0 lg:w-auto">
	<i class="far fa-file-pdf mr-1"></i> 
	Download pdf
</button>

<button class="btn btn--base btn--large w-full mb-4 lg:mb-0 lg:w-auto">
	<i class="far fa-file-pdf mr-1"></i> 
	Download pdf
</button>