<div> <button class="button button--sm w-24 mr-1 mb-2 bg-theme-1 text-white">Small</button> <button class="button w-24 mr-1 mb-2 bg-theme-1 text-white">Medium</button> <button class="button button--lg w-24 mr-1 mb-2 bg-theme-1 text-white">Large</button> </div>
<div class="mt-5"> <button class="button button--sm w-24 mr-1 mb-2 border text-gray-700">Small</button> <button class="button w-24 mr-1 mb-2 border text-gray-700">Medium</button> <button class="button button--lg w-24 mr-1 mb-2 border text-gray-700">Large</button> </div>

<a href="" class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white">Link</a> <a href="" class="button w-24 inline-block mr-1 mb-2 border text-gray-700">Button</a> <a href="" class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white">Input</a> <a href="" class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white">Submit</a> <a href="" class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white">Reset</a> <a href="" class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600">Metal</a>

<div> <button class="button w-24 shadow-md mr-1 mb-2 bg-theme-1 text-white">Primary</button> <button class="button w-24 shadow-md mr-1 mb-2 text-gray-700">Secondary</button> <button class="button w-24 shadow-md mr-1 mb-2 bg-theme-9 text-white">Success</button> <button class="button w-24 shadow-md mr-1 mb-2 bg-theme-12 text-white">Warning</button> <button class="button w-24 shadow-md mr-1 mb-2 bg-theme-6 text-white">Danger</button> <button class="button w-24 shadow-md mr-1 mb-2 bg-gray-200 text-gray-600">Dark</button> </div>
<div class="mt-5"> <button class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-1 text-white">Primary</button> <button class="button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700">Secondary</button> <button class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-9 text-white">Success</button> <button class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-12 text-white">Warning</button> <button class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-6 text-white">Danger</button> <button class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-gray-200 text-gray-600">Dark</button> </div>

<button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-32 text-white"> <i data-feather="facebook" class="w-4 h-4 mr-2"></i> Facebook </button> <button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-33 text-white"> <i data-feather="twitter" class="w-4 h-4 mr-2"></i> Twitter </button> <button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-34 text-white"> <i data-feather="instagram" class="w-4 h-4 mr-2"></i> Instagram </button> <button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-35 text-white"> <i data-feather="linkedin" class="w-4 h-4 mr-2"></i> Linkedin </button>

<button class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white inline-flex items-center"> Saving <i data-loading-icon="oval" data-color="white" class="w-4 h-4 ml-auto"></i> </button> <button class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white inline-flex items-center"> Adding <i data-loading-icon="spinning-circles" data-color="white" class="w-4 h-4 ml-auto"></i> </button> <button class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white inline-flex items-center"> Loading <i data-loading-icon="three-dots" data-color="white" class="w-4 h-4 ml-auto"></i> </button> <button class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white inline-flex items-center"> Deleting <i data-loading-icon="puff" data-color="white" class="w-4 h-4 ml-auto"></i> </button>

<button class="button w-24 rounded-full mr-1 mb-2 bg-theme-1 text-white">Primary</button> <button class="button w-24 rounded-full mr-1 mb-2 border text-gray-700">Secondary</button> <button class="button w-24 rounded-full mr-1 mb-2 bg-theme-9 text-white">Success</button> <button class="button w-24 rounded-full mr-1 mb-2 bg-theme-12 text-white">Warning</button> <button class="button w-24 rounded-full mr-1 mb-2 bg-theme-6 text-white">Danger</button> <button class="button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600">Dark</button>

<button class="button w-24 rounded-full mr-1 mb-2 bg-theme-14 text-theme-10">Primary</button> <button class="button w-24 rounded-full mr-1 mb-2 border text-gray-700">Secondary</button> <button class="button w-24 rounded-full mr-1 mb-2 bg-theme-18 text-theme-9">Success</button> <button class="button w-24 rounded-full mr-1 mb-2 bg-theme-17 text-theme-11">Warning</button> <button class="button w-24 rounded-full mr-1 mb-2 bg-theme-31 text-theme-6">Danger</button> <button class="button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600">Dark</button>

<button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-1 text-white"> <i data-feather="activity" class="w-4 h-4 mr-2"></i> Activity </button> <button class="button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700"> <i data-feather="hard-drive" class="w-4 h-4 mr-2"></i> Hard Drive </button> <button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-9 text-white"> <i data-feather="calendar" class="w-4 h-4 mr-2"></i> Calendar </button> <button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-12 text-white"> <i data-feather="share-2" class="w-4 h-4 mr-2"></i> Share </button> <button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-6 text-white"> <i data-feather="trash" class="w-4 h-4 mr-2"></i> Trash </button> <button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-gray-200 text-gray-600"> <i data-feather="image" class="w-4 h-4 mr-2"></i> Image </button>

<button class="button px-2 mr-1 mb-2 bg-theme-1 text-white"> <span class="w-5 h-5 flex items-center justify-center"> <i data-feather="activity" class="w-4 h-4"></i> </span> </button> <button class="button px-2 mr-1 mb-2 border text-gray-700"> <span class="w-5 h-5 flex items-center justify-center"> <i data-feather="hard-drive" class="w-4 h-4"></i> </span> </button> <button class="button px-2 mr-1 mb-2 bg-theme-9 text-white"> <span class="w-5 h-5 flex items-center justify-center"> <i data-feather="calendar" class="w-4 h-4"></i> </span> </button> <button class="button px-2 mr-1 mb-2 bg-theme-12 text-white"> <span class="w-5 h-5 flex items-center justify-center"> <i data-feather="share-2" class="w-4 h-4"></i> </span> </button> <button class="button px-2 mr-1 mb-2 bg-theme-6 text-white"> <span class="w-5 h-5 flex items-center justify-center"> <i data-feather="trash" class="w-4 h-4"></i> </span> </button> <button class="button px-2 mr-1 mb-2 bg-gray-200 text-gray-600"> <span class="w-5 h-5 flex items-center justify-center"> <i data-feather="image" class="w-4 h-4"></i> </span> </button>