Buttons

Buttons trigger actions and are available in multiple styles and sizes.

Primary Buttons Sizes

		
		
		<div class="flex items-end gap-12">
			<button type="button" class="btn-sm bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Button</button>
			<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Button</button>
			<button type="button" class="btn-lg bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Button</button> 
		</div>

Circular Buttons Sizes

		
		
		<div class="flex items-end gap-12">
			<button type="button" class="w-7.5 h-7.5 flex justify-center items-center bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white rounded-full cursor-pointer"><i class="icon-chevron-right"></i></button>
			<button type="button" class="w-8.75 h-8.75 flex justify-center items-center bg-primary border border-primary text-white text-center text-lg hover:bg-primary-hover hover:border-primary-hover hover:text-white rounded-full cursor-pointer"><i class="icon-chevron-right"></i></button>
			<button type="button" class="w-11 h-11 flex justify-center items-center bg-primary border border-primary text-white text-center text-xl hover:bg-primary-hover hover:border-primary-hover hover:text-white rounded-full cursor-pointer"><i class="icon-chevron-right"></i></button> 
		</div>

Default Buttons

		
		
		<div class="flex items-end gap-9">
			<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Primary</button>
			<button type="button" class="btn bg-dark border border-dark text-white text-center hover:bg-black hover:border-border-color hover:text-white">Dark</button>
			<button type="button" class="btn bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:border-light-800 hover:text-dark">Light</button>
			<button type="button" class="btn bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white">Info</button>
			<button type="button" class="btn bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white">Warning</button>
			<button type="button" class="btn bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white">Success</button>
			<button type="button" class="btn bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white">Error</button>
		</div>

Outline Buttons

		
		
		<div class="flex items-end gap-9">
			<button type="button" class="btn bg-transparent border border-primary text-primary text-center hover:bg-primary-100">Primary</button>
			<button type="button" class="btn bg-transparent border border-dark text-dark text-center hover:bg-gray-100">Dark</button>
			<button type="button" class="btn bg-transparent border border-border-color text-gray-700 text-center hover:bg-light-100">Light</button>
			<button type="button" class="btn bg-transparent border border-info text-info text-center hover:bg-info-100">Info</button>
			<button type="button" class="btn bg-transparent border border-warning text-warning text-center hover:bg-warning-100">Warning</button>
			<button type="button" class="btn bg-transparent border border-success text-success text-center hover:bg-success-100">Success</button>
			<button type="button" class="btn bg-transparent border border-danger text-danger text-center hover:bg-danger-100">Error</button>
		</div>

Ghost Buttons

		
		
		<div class="flex items-end gap-9">
			<button type="button" class="btn bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200">Primary</button>
			<button type="button" class="btn bg-gray-100 border border-dark text-dark text-center hover:bg-gray-200">Dark</button>
			<button type="button" class="btn bg-light-100 border border-border-color text-dark text-center hover:bg-gray-200">Light</button>
			<button type="button" class="btn bg-info-100 border border-info text-info text-center hover:bg-info-200">Info</button>
			<button type="button" class="btn bg-warning-100 border border-warning text-warning text-center hover:bg-warning-200">Warning</button>
			<button type="button" class="btn bg-success-100 border border-success text-success text-center hover:bg-success-200">Success</button>
			<button type="button" class="btn bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200">Error</button>
		</div>

Rounded Buttons

		
		
		<div class="flex items-end gap-9">
			<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white rounded-full">Primary</button>
			<button type="button" class="btn bg-dark border border-dark text-white text-center hover:bg-black hover:border-border-color hover:text-white rounded-full">Dark</button>
			<button type="button" class="btn bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:border-light-800 hover:text-dark rounded-full">Light</button>
			<button type="button" class="btn bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white rounded-full">Info</button>
			<button type="button" class="btn bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white rounded-full">Warning</button>
			<button type="button" class="btn bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white rounded-full">Success</button>
			<button type="button" class="btn bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white rounded-full">Error</button>
		</div>

Outline Round Buttons

		
		
		<div class="flex items-end gap-9">
			<button type="button" class="btn bg-transparent border border-primary text-primary text-center hover:bg-primary-100 rounded-full">Primary</button>
			<button type="button" class="btn bg-transparent border border-dark text-dark text-center hover:bg-gray-100 rounded-full">Dark</button>
			<button type="button" class="btn bg-transparent border border-border-color text-gray-700 text-center hover:bg-light-100 rounded-full">Light</button>
			<button type="button" class="btn bg-transparent border border-info text-info text-center hover:bg-info-100 rounded-full">Info</button>
			<button type="button" class="btn bg-transparent border border-warning text-warning text-center hover:bg-warning-100 rounded-full">Warning</button>
			<button type="button" class="btn bg-transparent border border-success text-success text-center hover:bg-success-100 rounded-full">Success</button>
			<button type="button" class="btn bg-transparent border border-danger text-danger text-center hover:bg-danger-100 rounded-full">Error</button>
		</div>

Ghost Round Buttons

		
		
		<div class="flex items-end gap-9">
			<button type="button" class="btn bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200 rounded-full">Primary</button>
			<button type="button" class="btn bg-gray-100 border border-dark text-dark text-center hover:bg-gray-200 rounded-full">Dark</button>
			<button type="button" class="btn bg-light-100 border border-border-color text-dark text-center hover:bg-gray-200 rounded-full">Light</button>
			<button type="button" class="btn bg-info-100 border border-info text-info text-center hover:bg-info-200 rounded-full">Info</button>
			<button type="button" class="btn bg-warning-100 border border-warning text-warning text-center hover:bg-warning-200 rounded-full">Warning</button>
			<button type="button" class="btn bg-success-100 border border-success text-success text-center hover:bg-success-200 rounded-full">Success</button>
			<button type="button" class="btn bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200 rounded-full">Error</button>
		</div>

Default Buttons with Left Icon

		
		
		<div class="flex items-end gap-9">
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white"><i class="icon-chevron-left"></i>Primary</button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-dark border border-dark text-white text-center hover:bg-black hover:border-border-color hover:text-white"><i class="icon-chevron-left"></i>Dark</button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:border-light-800 hover:text-dark"><i class="icon-chevron-left"></i>Light</button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white"><i class="icon-chevron-left"></i>Info</button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white"><i class="icon-chevron-left"></i>Warning</button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white"><i class="icon-chevron-left"></i>Success</button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white"><i class="icon-chevron-left"></i>Error</button>
		</div>

Default Buttons with Right Icon

		
		
		<div class="flex items-end gap-9">
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Primary<i class="icon-chevron-right"></i></button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-dark border border-dark text-white text-center hover:bg-black hover:border-border-color hover:text-white">Dark<i class="icon-chevron-right"></i></button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:border-light-800 hover:text-dark">Light<i class="icon-chevron-right"></i></button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white">Info<i class="icon-chevron-right"></i></button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white">Warning<i class="icon-chevron-right"></i></button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white">Success<i class="icon-chevron-right"></i></button>
			<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white">Error<i class="icon-chevron-right"></i></button>
		</div>