Buttons

Primary Buttons

Primary, Default Primary, Green Primary, Yellow Primary, Red Primary, Gray

<p class="buttons">
	<button class="button">Primary, Default</button>
	<button class="button color--green">Primary, Green</button>
	<button class="button color--yellow">Primary, Yellow</button>
	<button class="button color--red">Primary, Red</button>
	<button class="button color--gray">Primary, Gray</button>
</p>

Secondary Buttons

Secondary, Default Secondary, Green Secondary, Yellow Secondary, Red Secondary, Gray

<p class="buttons">
	<button class="button secondary">Primary, Default</button>
	<button class="button secondary color--green">Primary, Green</button>
	<button class="button secondary color--yellow">Primary, Yellow</button>
	<button class="button secondary color--red">Primary, Red</button>
	<button class="button secondary color--gray">Primary, Gray</button>
</p>

Full-width Buttons

Primary, Default, Full-width Primary, Green, Full-width Primary, Yellow, Full-width Primary, Red, Full-width Primary, Gray, Full-width Secondary, Default, Full-width Secondary, Green, Full-width Secondary, Yellow, Full-width Secondary, Red, Full-width Secondary, Gray, Full-width

<p class="buttons">
	<button class="button fullWidth">Primary, Default</button>
	<button class="button fullWidth color--green">Primary, Green</button>
	<button class="button fullWidth color--yellow">Primary, Yellow</button>
	<button class="button fullWidth color--red">Primary, Red</button>
	<button class="button fullWidth color--gray">Primary, Gray</button>
	<button class="button secondary fullWidth">Secondary, Default, Full-width</button>
	<button class="button secondary fullWidth color--green">Secondary, Green, Full-width</button>
	<button class="button secondary fullWidth color--yellow">Secondary, Yellow, Full-width</button>
	<button class="button secondary fullWidth color--red">Secondary, Red, Full-width</button>
	<button class="button secondary fullWidth color--gray">Secondary, Gray, Full-width</button>
</p>

Centered Buttons

Primary, Default, Centered Primary, Green, Centered Primary, Yellow, Centered Primary, Red, Centered Primary, Gray, Centered Secondary, Default, Centered Secondary, Green, Centered Secondary, Yellow, Centered Secondary, Red, Centered Secondary, Gray, Centered

<p class="buttons">
	<button class="button centered">Primary, Default</button>
	<button class="button centered color--green">Primary, Green</button>
	<button class="button centered color--yellow">Primary, Yellow</button>
	<button class="button centered color--red">Primary, Red</button>
	<button class="button centered color--gray">Primary, Gray</button>
	<button class="button secondary centered">Secondary, Default, Full-width</button>
	<button class="button secondary centered color--green">Secondary, Green, Full-width</button>
	<button class="button secondary centered color--yellow">Secondary, Yellow, Full-width</button>
	<button class="button secondary centered color--red">Secondary, Red, Full-width</button>
	<button class="button secondary centered color--gray">Secondary, Gray, Full-width</button>
</p>