Button group
Default Button group style
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md">Left</button>
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary">Middle</button>
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md">Right</button>
Button toolbar
Default Button toolbar style
<div class="btn-group relative inline-flex align-middle rounded-md mr-2 mb-2">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md">1</button>
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary">2</button>
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary">3</button>
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md">4</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-md mr-2 mb-2">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md">5</button>
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary">6</button>
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md">7</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-md mb-2">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md">8</button>
</div>
Button Sizing
Default button size style
<div class="btn-group relative inline-flex align-middle rounded-md mb-2 btn-group-lg">
<button class="py-4 px-8 max-xl:py-3 max-xl:px-4 leading-5 border border-primary text-white bg-primary font-medium text-lg max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md" type="button">Left</button>
<button class="py-4 px-8 max-xl:py-3 max-xl:px-4 leading-5 border border-primary text-white bg-primary font-medium text-lg max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Middle</button>
<button class="py-4 px-8 max-xl:py-3 max-xl:px-4 leading-5 border border-primary text-white bg-primary font-medium text-lg max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md" type="button">Right</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-md mb-2">
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md" type="button">Left</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Middle</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md" type="button">Right</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-md mb-2 btn-group-sm">
<button class="sm:py-[5px] sm:px-3 py-2.5 px-4 border border-primary text-white bg-primary sm:text-[13px] text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md" type="button">Left</button>
<button class="sm:py-[5px] sm:px-3 py-2.5 px-4 border border-primary text-white bg-primary sm:text-[13px] text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Middle</button>
<button class="sm:py-[5px] sm:px-3 py-2.5 px-4 border border-primary text-white bg-primary sm:text-[13px] text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md" type="button">Right</button>
</div>
Button Nesting
Default button nesting style
<div class="btn-group relative inline-flex align-middle rounded-md">
<button id="btnGroupDrop1" type="button" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md" data-dz-dropdown="dropdown">Dropdown</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.60rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#242424] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
Vertical variation
Default button vertical variation style
<div class="btn-group relative inline-flex flex-col items-start justify-center align-middle rounded-md vertical">
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-ss-md rounded-se-md" type="button">Button</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Button</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Button</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Button</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Button</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-es-md rounded-ee-md" type="button">Button</button>
</div>
Vertical dropdown variation
Default button vertical variation style
<div class="btn-group relative inline-flex flex-col items-start justify-center align-middle rounded-md vertical">
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-ss-md rounded-se-md w-full" type="button">Button</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary w-full" type="button">Button</button>
<div role="group" class="btn-group relative inline-flex align-middle rounded-md">
<button data-dz-dropdown="dropdown1" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Dropdown</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.60rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#242424] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown1">
<a href="javascript:void(0);" class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white">Dropdown link</a>
<a href="javascript:void(0);" class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white">Dropdown link</a>
</div>
</div>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary w-full" type="button">Button</button>
<button class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary w-full" type="button">Button</button>
<div role="group" class="btn-group relative inline-flex align-middle rounded-md">
<button data-dz-dropdown="dropdown2" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Dropdown</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.60rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#242424] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown2">
<a href="javascript:void(0);" class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white">Dropdown link</a>
<a href="javascript:void(0);" class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white">Dropdown link</a>
</div>
</div>
<div role="group" class="btn-group relative inline-flex align-middle rounded-md">
<button data-dz-dropdown="dropdown3" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary" type="button">Dropdown</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.60rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#242424] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown3">
<a href="javascript:void(0);" class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white">Dropdown link</a>
<a href="javascript:void(0);" class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white">Dropdown link</a>
</div>
</div>
<div role="group" class="btn-group relative inline-flex align-middle rounded-es-md rounded-ee-md">
<button data-dz-dropdown="dropdown4" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary font-medium text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-es-md rounded-ee-md" type="button">Dropdown</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.60rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#242424] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown4">
<a href="javascript:void(0);" class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white">Dropdown link</a>
<a href="javascript:void(0);" class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-transparent dark:text-white">Dropdown link</a>
</div>
</div>
</div>