Aabiz - Admin & Dashboard Template

Default Buttons


<button class="px-2 py-1 lg:px-4 bg-primary  text-white text-sm  rounded hover:bg-primary-600 border border-primary-500">Primary</button>
<button class="px-2 py-1 lg:px-4 bg-red  text-white text-sm  rounded hover:bg-red-600 border border-red-500">Red</button>
<button class="px-2 py-1 lg:px-4 bg-green  text-white text-sm  rounded hover:bg-green-600 border border-green-500">Green</button>
<button class="px-2 py-1 lg:px-4 bg-yellow  text-white text-sm  rounded hover:bg-yellow-600 border border-yellow-500">Yellow</button>
<button class="px-2 py-1 lg:px-4 bg-pink  text-white text-sm  rounded hover:bg-pink-600 border border-pink-500"type="button" >Pink</button>
<button class="px-2 py-1 lg:px-4 bg-blue  text-white text-sm  rounded transition hover:bg-blue-600 border border-blue font-medium">Blue</button>
<button class="px-2 py-1 lg:px-4 bg-slate-100  text-gray-600 text-sm  rounded hover:bg-slate-200 border border-slate-100">Light</button>
<button class="px-2 py-1 lg:px-4 bg-slate-900  text-white text-sm  rounded hover:bg-slate-800 border border-slate-900">Dark</button>

Rounded Buttons


<button type="button" class="px-2 py-1 lg:px-4 bg-primary  text-white text-sm  rounded-full transition hover:bg-primary-600 border border-primary font-medium">Primary</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-white text-gray-900 text-sm font-medium  focus:outline-none  rounded-full transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10  dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-red  text-white text-sm  rounded-full transition hover:bg-red-600 border border-red font-medium">Red</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-green  text-white text-sm  rounded-full transition hover:bg-green-600 border border-green font-medium">Green</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-yellow  text-slate-900 text-sm  rounded-full transition hover:bg-yellow-600 border border-yellow font-medium">Yellow</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-pink  text-white text-sm  rounded-full transition hover:bg-pink-600 border border-pink font-medium">Pink</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-blue  text-white text-sm  rounded-full transition hover:bg-blue-600 border border-blue font-medium">Blue</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-slate-100  text-gray-600 text-sm  rounded-full transition hover:bg-slate-200 border border-slate-100 font-medium">Light</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-slate-900  text-white text-sm  rounded-full transition hover:bg-slate-800 border border-slate-900 font-medium">Dark</button>

Outline Buttons


<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-primary text-sm  rounded transition hover:bg-primary-500 hover:text-white border border-primary font-medium">Primary</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-gray-900 text-sm font-medium  focus:outline-none  rounded transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10  dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-red text-sm  rounded transition hover:bg-red-600 hover:text-white border border-red font-medium">Red</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-green text-sm  rounded transition hover:bg-green-600 hover:text-white border border-green font-medium">Green</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-yellow text-sm  rounded transition hover:bg-yellow-600 hover:text-white border border-yellow font-medium">Yellow</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-pink text-sm  rounded transition hover:bg-pink-600 hover:text-white border border-pink font-medium">Pink</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-blue text-sm  rounded transition hover:bg-blue-600 hover:text-white border border-blue font-medium">Blue</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-gray-600 text-sm  rounded transition hover:bg-slate-200 hover:text-gray-900 border border-slate-100 font-medium">Light</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-slate-900 text-sm  rounded transition hover:bg-slate-800 hover:text-white border border-slate-900 font-medium">Dark</button>

Outline Rounded Buttons


<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-primary text-sm  rounded-full transition hover:bg-primary-500 hover:text-white border border-primary font-medium mb-2">Primary</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent text-gray-900 text-sm font-medium mb-2  focus:outline-none  rounded-full transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10  dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-red text-sm  rounded-full transition hover:bg-red-600 hover:text-white border border-red font-medium mb-2">Red</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-green text-sm  rounded-full transition hover:bg-green-600 hover:text-white border border-green font-medium mb-2">Green</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-yellow text-sm  rounded-full transition hover:bg-yellow-600 hover:text-white border border-yellow font-medium mb-2">Yellow</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-pink text-sm  rounded-full transition hover:bg-pink-600 hover:text-white border border-pink font-medium mb-2">Pink</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-blue text-sm  rounded-full transition hover:bg-blue-600 hover:text-white border border-blue font-medium mb-2">Blue</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-gray-600 text-sm  rounded-full transition hover:bg-slate-200 hover:text-gray-900 border border-slate-100 font-medium mb-2">Light</button>
<button type="button" class="px-2 py-1 lg:px-4 bg-transparent  text-slate-900 text-sm  rounded-full transition hover:bg-slate-800 hover:text-white border border-slate-900 font-medium mb-2">Dark</button>

Gradient Buttons


<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-primary-500 via-primary-600 to-primary-700 hover:bg-gradient-to-br text-sm  rounded transition border border-primary-500 font-medium mb-2">Primary</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-red-600 border border-red font-medium mb-2">Red</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-green-600 border border-green font-medium mb-2">Green</button>
<button type="button" class="px-2 py-1 lg:px-4 text-gray-900 bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-yellow-600 border border-yellow font-medium mb-2">Yellow</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-pink-600 border border-pink font-medium mb-2">Pink</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-blue-600 border border-blue font-medium mb-2">Blue</button>
<button type="button" class="px-2 py-1 lg:px-4 text-slate-700 bg-gradient-to-r from-slate-100 via-slate-200 to-slate-300 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-slate-200 border border-slate-100 font-medium mb-2">Light</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-slate-500 via-slate-600 to-slate-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-slate-800 border border-slate-500/10 font-medium mb-2">Dark</button>

Gradient Rounded Buttons


<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-primary-500 via-primary-600 to-primary-700 hover:bg-gradient-to-br text-sm  rounded transition border border-primary-500 font-medium mb-2">Primary</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-red-600 border border-red font-medium mb-2">Red</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-green-600 border border-green font-medium mb-2">Green</button>
<button type="button" class="px-2 py-1 lg:px-4 text-gray-900 bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-yellow-600 border border-yellow font-medium mb-2">Yellow</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-pink-600 border border-pink font-medium mb-2">Pink</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-blue-600 border border-blue font-medium mb-2">Blue</button>
<button type="button" class="px-2 py-1 lg:px-4 text-slate-700 bg-gradient-to-r from-slate-100 via-slate-200 to-slate-300 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-slate-200 border border-slate-100 font-medium mb-2">Light</button>
<button type="button" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-slate-500 via-slate-600 to-slate-700 hover:bg-gradient-to-br text-sm  rounded transition hover:bg-slate-800 border border-slate-500/10 font-medium mb-2">Dark</button>

Gradient Tow Color Buttons


<button type="button" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:outline-none  font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Purple to Blue</button>
<button type="button" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:outline-none  font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Cyan to Blue</button>
<button type="button" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Green to Blue</button>
<button type="button" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Purple to Pink</button>
<button type="button" class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:outline-none font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Pink to Orange</button>
<button type="button" class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:outline-none  font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Teal to Lime</button>
<button type="button" class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:outline-none  font-medium rounded text-sm px-2 py-1 lg:px-4 border dark:border-slate-800/10 text-center transition mb-2">Red to Yellow</button>

Gradient outline Buttons


<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:outline-none ">
    <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
    Purple to blue
    </span>
</button>
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:outline-none">
    <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
    Cyan to blue
    </span>
</button>
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:outline-none">
    <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
    Green to blue
    </span>
</button>
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:outline-none ">
    <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
    Purple to pink
    </span>
</button>
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:outline-none ">
    <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
    Pink to orange
    </span>
</button>
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:outline-none ">
    <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
    Teal to Lime
    </span>
</button>
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:outline-none">
    <span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
    Red to Yellow
    </span>
</button>

Social Buttons


<button type="button" class="text-white bg-[#0165E1] hover:bg-[#0165E1]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#0165E1] lg:pe-3 text-center inline-flex items-center mb-2">
    <span class="bg-white w-8 h-8 text-center me-2 rounded">
        <i class="fab fa-facebook text-[#0165E1] text-2xl  "></i>
    </span>
    Sign in with Facebook
</button>

<button type="button" class="text-white bg-[#1da1f2] hover:bg-[#1da1f2]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#1da1f2] lg:pe-3 text-center inline-flex items-center mb-2">
    <span class="bg-white w-8 h-8 text-center me-2 rounded">
        <i class="fab fa-twitter text-[#1da1f2] text-2xl  "></i>
    </span>
    Sign in with Twitter
</button>

<button type="button" class="text-white bg-[#24292F] hover:bg-[#24292F]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#24292F] lg:pe-3 text-center inline-flex items-center mb-2">
    <span class="bg-white w-8 h-8 text-center me-2 rounded">
        <i class="fab fa-github text-[#24292F] text-2xl  "></i>
    </span>
    Sign in with Github
</button>

<button type="button" class="text-white bg-[#4285F4] hover:bg-[#4285F4]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#4285F4] lg:pe-3 text-center inline-flex items-center mb-2">
    <span class="bg-white w-8 h-8 text-center me-2 rounded">
        <i class="fab fa-google text-[#4285F4] text-2xl  "></i>
    </span>
    Sign in with Google
</button>

<button type="button" class="text-white bg-[#050708] hover:bg-[#050708]/90 focus:outline-none font-medium rounded text-sm pe-2 py-0 border border-[#050708] lg:pe-3 text-center inline-flex items-center mb-2">
    <span class="bg-white w-8 h-8 text-center me-2 rounded">
        <i class="fab fa-apple text-[#050708] text-2xl  "></i>
    </span>
    Sign in with Apple
</button>

Buttons with icon and label


<button type="button" class="text-white bg-primary-500 hover:bg-primary-600  focus:outline-none font-medium rounded text-sm px-2 py-1 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 mb-2">
    <i class="fas fa-cart-shopping mr-2"></i>
    Buy now
</button>
<button type="button" class="text-white bg-primary-500 hover:bg-primary-600  focus:outline-none font-medium rounded text-sm px-2 py-1 text-center inline-flex items-center  dark:bg-primary-600 dark:hover:bg-primary-700 mb-2">
    Choose plan
    <i class="fas fa-arrow-right ml-2"></i>
</button>
<button type="button" class="inline-flex items-center px-2 py-1 text-sm font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600  focus:outline-none dark:bg-primary-600 dark:hover:bg-primary-700  mb-2">
    Messages
    <span class="inline-flex items-center justify-center w-4 h-4 ml-2 text-xs font-semibold text-primary-600 bg-primary-100 rounded-full">
    2
    </span>
</button>
<button type="button" class="text-white bg-primary-500 hover:bg-primary-600  focus:outline-none font-medium rounded-lg text-sm p-2 text-center inline-flex items-center  dark:bg-primary-600 dark:hover:bg-primary-700 mb-2">
    <i class="fas fa-arrow-right"></i>
</button>
<button type="button" class="text-white bg-primary-500 hover:bg-primary-600  focus:outline-none font-medium rounded-full text-sm p-2 text-center inline-flex items-center  dark:bg-primary-600 dark:hover:bg-primary-700 mb-2">
    <i class="fas fa-arrow-right"></i>
</button>
<button type="button" class="text-primary-700 border border-5lue-700 hover:bg-primary-600 hover:text-white  focus:outline-none font-medium rounded-lg text-sm p-2 text-center inline-flex items-center  dark:border-primary-500 dark:text-primary-500 dark:hover:text-white mb-2">
    <i class="fas fa-arrow-right"></i>
</button>
<button type="button" class="text-primary-700 border border-5lue-700 hover:bg-primary-600 hover:text-white  focus:outline-none font-medium rounded-full text-sm p-2 text-center inline-flex items-center dark:border-primary-500 dark:text-primary-500 dark:hover:text-white mb-2">
    <i class="fas fa-arrow-right"></i>
</button>

Button sizes


<button type="button" class="px-2 py-1 text-xs font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600  focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Extra small</button>
<button type="button" class="px-2 py-1 text-sm font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600  focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Small</button>
<button type="button" class="text-white bg-primary-500 hover:bg-primary-600  focus:outline-none font-medium rounded text-sm px-3 py-2 text-center dark:bg-primary-500 dark:hover:bg-primary-600 ">Base</button>
<button type="button" class="px-3 py-2 text-base font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600  focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Large</button>
<button type="button" class="text-white bg-primary-500 hover:bg-primary-600  focus:outline-none font-medium rounded text-base px-5 py-3 text-center dark:bg-primary-500 dark:hover:bg-primary-600 ">Extra large</button>

Loader


<button disabled type="button" class="text-white bg-primary-500 hover:bg-primary-600  focus:outline-none  font-medium rounded text-sm px-2 py-1 text-center mr-2 dark:bg-primary-600 dark:hover:bg-primary-700  inline-flex items-center">
    <i class="fas fa-spinner animate-spin mr-2"></i>
    Loading...
</button>
<button disabled type="button" class="py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10  focus:outline-none  focus:text-primary-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 inline-flex items-center">
    <i class="fas fa-spinner animate-spin mr-2"></i>
    Loading...
</button>

Disabled


<button type="button" class="text-white bg-primary-400 dark:bg-primary-500 cursor-not-allowed font-medium rounded text-sm px-3 py-2 text-center" disabled>Disabled button</button>

Group buttons


<button type="button" class="py-1 px-3 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
    Profile
</button>
<button type="button" class="py-1 px-3 -mx-1 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
    Settings
</button>
<button type="button" class="py-1 px-3 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
    Messages
</button>

Mannat Themes

Buttons

Default Buttons

Rounded Buttons

Outline Buttons

Outline Rounded Buttons

Gradient Buttons

Gradient Rounded Buttons

Gradient Tow Color Buttons

Gradient outline Buttons

Social Buttons

Buttons with icon and label

Button sizes

Loader

Disabled

Group buttons