Button Groups — Dreams HMS

Basic

		
		 
		<div class="inline-flex">
			<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
				Button
			</button>
			<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
				Button
			</button>
			<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
				Button
			</button>
		</div>

Icons Only

		
		 
		<div class="inline-flex">
			<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
				<i class="icon-chevron-left"></i>
			</button> 
			<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
				<i class="icon-chevron-right"></i>
			</button>
		</div>

With Count

		
		 
		<div class="inline-flex">
			<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-900">
				<i class="icon-file me-1"></i> Invoices
			</button>
			</button>
			<button type="button" class="btn text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-900">
				10
			</button>
		</div>

With Dropdown

		
		 
		<div class="inline-flex"> 
			<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
				<div class="inline-flex">
					<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark">
						Save Changes
					</button> 
					<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-800 focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
						<i class="icon-chevron-down"></i>
					</button>
				</div>  
				<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
					<div class="p-2 space-y-1">
						<a class="flex items-center px-4 py-1.75 rounded-lg text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
							Action
						</a>
						<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
							Another Action
						</a>
						<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
							Other Action
						</a>
						<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
							Seperate Action
						</a>
					</div>
				</div>
			</div> 
		</div>