Buttons

#01 Default button


                                    										




				









				



	<button type="button" class="btn btn-primary" >
		Primary
	</button>

			




				









				



	<button type="button" class="btn btn-secondary" >
		Secondary
	</button>

#02 Large button


                                    										




				









					



	<button type="button" class="btn btn-primary btn-lg" >
		Primary
	</button>

			




				









					



	<button type="button" class="btn btn-secondary btn-lg" >
		Secondary
	</button>

#03 Outline button


                                    										




				









				



	<button type="button" class="btn btn-outline-primary" >
		Primary
	</button>

			




				









				



	<button type="button" class="btn btn-outline-secondary" >
		Secondary
	</button>

#04 Blank button


                                    										




				









				



	<button type="button" class="btn btn-blank-primary" >
		Primary
	</button>

			




				









				



	<button type="button" class="btn btn-blank-secondary" >
		Secondary
	</button>

#05 Blank no spacing button


                                    										




				




	




				



	<button type="button" class="btn btn-blank-primary btn--no-spacing" >
		Primary
	</button>

			




				




	




				



	<button type="button" class="btn btn-blank-secondary btn--no-spacing" >
		Secondary
	</button>

#06 Icon button




                                    										




				





			


	
				



	<button type="button" class="btn btn-outline-primary btn--with-icon" >
				<span class="btn__icon  ">			<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd"
			      d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
		</svg>

	</span>
				<span class="btn__label">Primary</span>
		
	</button>

			




				





			


	
				



	<button type="button" class="btn btn-outline-secondary btn--with-icon" >
				<span class="btn__icon  ">			<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd"
			      d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
		</svg>

	</span>
				<span class="btn__label">Secondary</span>
		
	</button>

	<br><br>
			




				







				
	




	<button type="button" class="btn btn-outline-primary btn--icon-only btn--with-icon" >
				<span class="btn__icon" >			<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd"
			      d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
		</svg>

	</span>
	
	</button>

			




				







				
	




	<button type="button" class="btn btn-outline-secondary btn--icon-only btn--with-icon" >
				<span class="btn__icon" >			<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd"
			      d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
		</svg>

	</span>
	
	</button>

#07 Fullwidth button


                                    										




				

	







				



	<button type="button" class="btn btn-primary btn--fullwidth" >
		Primary
	</button>

			




				

	







				



	<button type="button" class="btn btn-secondary btn--fullwidth" >
		Secondary
	</button>