Modernize TailwindCSS HTML Admin Template

Buttons

Solid color variants

Solid color variants - View Code

   
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-primary hover:bg-primaryemphasis text-white ">
  Primary
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-secondary hover:bg-secondaryemphasis  text-white  ">
  Secondary
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-success hover:bg-successemphasis text-white">
  Success
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-warning hover:bg-warningemphasis text-white ">
  Warning
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-error hover:bg-erroremphasis text-white  ">
  Error
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:bg-white dark:text-gray-800">
  Dark
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-gray-500 text-white hover:bg-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Grey
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-white text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  White
  </button>

Outline color variants

Outline color variants - View Code

   
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-primary text-primary hover:bg-primary hover:text-white">
  Primary
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-secondary text-secondary hover:bg-secondary hover:text-white">
  Secondary
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-success text-success hover:bg-success hover:text-white">
  Success
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-warning text-warning hover:bg-warning hover:text-white">
  Warning
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-error text-error hover:bg-error hover:text-white">
  Error
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-gray-800 dark:border-white text-gray-800 hover:bg-gray-900 hover:text-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">
  Dark
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-gray-500 dark:border-gray-400 dark:text-gray-400 text-gray-500 hover:bg-gray-600 hover:text-white dark:hover:bg-gray-400 dark:hover:text-white">
  Grey
  </button>

Ghost color variants

Ghost color variants - View Code

   
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-transparent text-primary hover:bg-lightprimary hover:text-primaryemphasis dark:hover:bg-darkprimary dark:hover:text-primary">
  Primary
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-transparent text-secondary hover:bg-lightsecondary hover:text-secondaryemphasis dark:hover:bg-darksecondary dark:hover:text-secondary">
  Secondary
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-transparent text-success hover:bg-lightsuccess hover:text-successemphasis dark:hover:bg-darksuccess dark:hover:text-success">
  Success
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-transparent text-warning hover:bg-lightwarning hover:text-warningemphasis dark:hover:bg-darkwarning dark:hover:text-warning">
  Warning
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-md border border-transparent text-error hover:bg-lighterror hover:text-erroremphasis dark:hover:bg-darkerror dark:hover:text-error">
  Error
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Button
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Button
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent text-white hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-white/10 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Button
  </button>

Soft color variants

Soft color variants - View Code

   
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-lightprimary text-primaryemphasis hover:bg-primary dark:hover:bg-darkprimary hover:text-darkprimary dark:text-primary">
  Primary
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-lightsecondary text-secondaryemphasis hover:bg-secondary dark:hover:bg-darksecondary hover:text-darksecondary dark:text-secondary">
  Secondary
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-lightsuccess hover:text-darksuccess text-successemphasis hover:bg-success dark:hover:bg-darksuccess dark:text-success">
  Success
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-lightwarning text-warningemphasis hover:text-darkwarning hover:bg-warning dark:hover:bg-darkwarning dark:text-warning">
  Warning
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-lighterror text-erroremphasis hover:text-darkerror hover:bg-error dark:hover:bg-darkerror dark:text-error">
  Error
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-white/10 dark:hover:bg-white/20 dark:text-white dark:hover:text-white">
  Dark
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-white/10 dark:hover:bg-white/20 dark:text-gray-400 dark:hover:text-gray-300">
  Grey
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-white/10 text-white hover:bg-white/20">
  White
  </button>

White color variants

White color variants - View Code

   
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-gray-200 bg-white text-primary hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700  dark:hover:bg-slate-900">
  Primary
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-gray-200 bg-white text-secondary hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:hover:bg-slate-900">
  Secondary
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-gray-200 bg-white text-success hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:hover:bg-slate-900">
  Button
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-gray-200 bg-white text-warning hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:hover:bg-slate-900">
  Button
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-gray-200 bg-white text-error hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:hover:bg-slate-900">
  Button
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900">
  Button
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:hover:bg-slate-900">
  Button
  </button>

Link color variants

Link color variants - View Code

   
  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-gray-800 hover:text-primary dark:text-white dark:hover:text-white/70 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Link
  </button>
  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Link
  </button>
  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-primary hover:text-primaryemphasis dark:text-primaryemphasis dark:hover:text-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Link
  </button>
  <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg text-white hover:text-white/80 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Link
  </button>

Pilled Button

Pilled Button - View Code

   
  <button type="button" class="btn-md text-sm font-semibold rounded-full border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Button
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Button
  </button>

Use the '.rounded-full' utility class to make buttons circular.

Block Button

Block Button - View Code

   
  <button type="button" class="btn-md text-sm font-semibold rounded-full border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Button
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Button
  </button>

'.w-full' or '.grid' classes will make the button fit to its parent width.

Button with Icon

Button with Icon - View Code

   
  <button type="button" class="btn-md text-sm flex gap-1 items-center font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 items-center font-medium rounded-lg border border-transparent bg-secondary text-white hover:bg-secondaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 items-center font-medium rounded-lg border border-transparent bg-success text-white hover:bg-successemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 items-center font-medium rounded-lg border border-transparent bg-warning text-white hover:bg-warningemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 items-center font-medium rounded-lg border border-transparent bg-error text-white hover:bg-erroremphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md flex gap-1 text-sm font-medium rounded-lg border border-transparent bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:bg-white dark:text-gray-800">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md flex gap-1 text-sm font-medium rounded-lg border border-transparent bg-gray-500 text-white hover:bg-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md flex gap-1 text-sm font-medium rounded-lg border border-transparent bg-white text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>

Ghost Button with Icon

Ghost Button with Icon - View Code

   
  <button type="button" class="btn-md text-sm flex gap-1 font-medium rounded-md border border-transparent text-primary hover:bg-lightprimary hover:text-primaryemphasis dark:hover:bg-darkprimary dark:hover:text-primary">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-medium rounded-md border border-transparent text-secondary hover:bg-lightsecondary hover:text-secondaryemphasis dark:hover:bg-darksecondary dark:hover:text-secondary">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-medium rounded-md border border-transparent text-success hover:bg-lightsuccess hover:text-successemphasis dark:hover:bg-darksuccess dark:hover:text-success">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-medium rounded-md border border-transparent text-warning hover:bg-lightwarning hover:text-warningemphasis dark:hover:bg-darkwarning dark:hover:text-warning">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-medium rounded-md border border-transparent text-error hover:bg-lighterror hover:text-erroremphasis dark:hover:bg-darkerror dark:hover:text-error">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-medium rounded-lg border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-medium rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-medium rounded-lg border border-transparent text-white hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-white/10 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>

Outline Button with Icon

Outline Button with Icon - View Code

   
  <button type="button" class="btn-md text-sm flex gap-1 font-semibold rounded-md border border-transparent text-primary hover:bg-lightprimary hover:text-primaryemphasis dark:hover:bg-darkprimary dark:hover:text-primary">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-semibold rounded-md border border-transparent text-secondary hover:bg-lightsecondary hover:text-secondaryemphasis dark:hover:bg-darksecondary dark:hover:text-secondary">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-semibold rounded-md border border-transparent text-success hover:bg-lightsuccess hover:text-successemphasis dark:hover:bg-darksuccess dark:hover:text-success">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-semibold rounded-md border border-transparent text-warning hover:bg-lightwarning hover:text-warningemphasis dark:hover:bg-darkwarning dark:hover:text-warning">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-semibold rounded-md border border-transparent text-error hover:bg-lighterror hover:text-erroremphasis dark:hover:bg-darkerror dark:hover:text-error">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-semibold rounded-lg border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-semibold rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>
  <button type="button" class="btn-md text-sm flex gap-1 font-semibold rounded-lg border border-transparent text-white hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-white/10 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  Add to cart <i class="ti ti-shopping-cart text-sm"></i>
  </button>

Icon with fixed size(small)

Icon with fixed size(small) - View Code

   
   <div class="flex gap-2 flex-wrap mb-4">
      <button type="button" class=" flex justify-center items-center size-[38px] text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] text-sm font-semibold rounded-lg border border-transparent bg-secondary text-white hover:bg-secondaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] text-sm font-semibold rounded-lg border border-transparent bg-success text-white hover:bg-successemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] text-sm font-semibold rounded-lg border border-transparent bg-warning text-white hover:bg-warningemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] text-sm font-semibold rounded-lg border border-transparent bg-error text-white hover:bg-erroremphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] text-sm font-medium rounded-lg border border-transparent bg-gray-500 text-white hover:bg-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] text-sm font-medium rounded-lg border border-transparent bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:bg-white dark:text-gray-800">
      <i class="ti ti-file-text text-sm"></i>
      </button>
    </div>
    <div class="flex gap-2 flex-wrap mb-4">
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-transparent text-primary hover:bg-lightprimary hover:text-primaryemphasis dark:hover:bg-darkprimary dark:hover:text-primary">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-transparent text-secondary hover:bg-lightsecondary hover:text-secondaryemphasis dark:hover:bg-darksecondary dark:hover:text-secondary">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-transparent text-success hover:bg-lightsuccess hover:text-successemphasis dark:hover:bg-darksuccess dark:hover:text-success">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-transparent text-warning hover:bg-lightwarning hover:text-warningemphasis dark:hover:bg-darkwarning dark:hover:text-warning">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-transparent text-error hover:bg-lighterror hover:text-erroremphasis dark:hover:bg-darkerror dark:hover:text-error">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-lg border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-sm"></i>
      </button>
    </div>
    <div class="flex gap-2 flex-wrap">
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-primary text-primary hover:bg-primary hover:text-white">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-secondary text-secondary hover:bg-secondary hover:text-white">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-success text-success hover:bg-success hover:text-white">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-warning text-warning hover:bg-warning hover:text-white">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-error text-error hover:bg-error hover:text-white">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-gray-800 dark:border-white text-gray-800 hover:bg-gray-900 hover:text-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">
      <i class="ti ti-file-text text-sm"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[38px] rounded-md border border-gray-500 dark:border-gray-400 dark:text-gray-400 text-gray-500 hover:bg-gray-600 hover:text-white dark:hover:bg-gray-400 dark:hover:text-white">
      <i class="ti ti-file-text text-sm"></i>
      </button>
    </div>

Icon with fixed size(Normal)

Icon with fixed size(Normal) - View Code

   
   <div class="flex gap-2 flex-wrap mb-4">
      <button type="button" class=" flex justify-center items-center size-[46px] text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] text-sm font-semibold rounded-lg border border-transparent bg-secondary text-white hover:bg-secondaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] text-sm font-semibold rounded-lg border border-transparent bg-success text-white hover:bg-successemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] text-sm font-semibold rounded-lg border border-transparent bg-warning text-white hover:bg-warningemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] text-sm font-semibold rounded-lg border border-transparent bg-error text-white hover:bg-erroremphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] text-sm font-medium rounded-lg border border-transparent bg-gray-500 text-white hover:bg-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] text-sm font-medium rounded-lg border border-transparent bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:bg-white dark:text-gray-800">
      <i class="ti ti-file-text text-base"></i>
      </button>
    </div>
    <div class="flex gap-2 flex-wrap mb-4">
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-transparent text-primary hover:bg-lightprimary hover:text-primaryemphasis dark:hover:bg-darkprimary dark:hover:text-primary">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-transparent text-secondary hover:bg-lightsecondary hover:text-secondaryemphasis dark:hover:bg-darksecondary dark:hover:text-secondary">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-transparent text-success hover:bg-lightsuccess hover:text-successemphasis dark:hover:bg-darksuccess dark:hover:text-success">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-transparent text-warning hover:bg-lightwarning hover:text-warningemphasis dark:hover:bg-darkwarning dark:hover:text-warning">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-transparent text-error hover:bg-lighterror hover:text-erroremphasis dark:hover:bg-darkerror dark:hover:text-error">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-lg border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-base"></i>
      </button>
    </div>
    <div class="flex gap-2 flex-wrap">
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-primary text-primary hover:bg-primary hover:text-white">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-secondary text-secondary hover:bg-secondary hover:text-white">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-success text-success hover:bg-success hover:text-white">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-warning text-warning hover:bg-warning hover:text-white">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-error text-error hover:bg-error hover:text-white">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-gray-800 dark:border-white text-gray-800 hover:bg-gray-900 hover:text-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">
      <i class="ti ti-file-text text-base"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[46px] rounded-md border border-gray-500 dark:border-gray-400 dark:text-gray-400 text-gray-500 hover:bg-gray-600 hover:text-white dark:hover:bg-gray-400 dark:hover:text-white">
      <i class="ti ti-file-text text-base"></i>
      </button>
    </div>

Icon with fixed size(Large)

Icon with fixed size(Large) - View Code

   
   <div class="flex gap-2 flex-wrap mb-4">
      <button type="button" class=" flex justify-center items-center size-[62px] text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] text-sm font-semibold rounded-lg border border-transparent bg-secondary text-white hover:bg-secondaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] text-sm font-semibold rounded-lg border border-transparent bg-success text-white hover:bg-successemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] text-sm font-semibold rounded-lg border border-transparent bg-warning text-white hover:bg-warningemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] text-sm font-semibold rounded-lg border border-transparent bg-error text-white hover:bg-erroremphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] text-sm font-medium rounded-lg border border-transparent bg-gray-500 text-white hover:bg-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] text-sm font-medium rounded-lg border border-transparent bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:bg-white dark:text-gray-800">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
    </div>
    <div class="flex gap-2 flex-wrap mb-4">
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-transparent text-primary hover:bg-lightprimary hover:text-primaryemphasis dark:hover:bg-darkprimary dark:hover:text-primary">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-transparent text-secondary hover:bg-lightsecondary hover:text-secondaryemphasis dark:hover:bg-darksecondary dark:hover:text-secondary">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-transparent text-success hover:bg-lightsuccess hover:text-successemphasis dark:hover:bg-darksuccess dark:hover:text-success">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-transparent text-warning hover:bg-lightwarning hover:text-warningemphasis dark:hover:bg-darkwarning dark:hover:text-warning">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-transparent text-error hover:bg-lighterror hover:text-erroremphasis dark:hover:bg-darkerror dark:hover:text-error">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-lg border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
    </div>
    <div class="flex gap-2 flex-wrap">
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-primary text-primary hover:bg-primary hover:text-white">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-secondary text-secondary hover:bg-secondary hover:text-white">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-success text-success hover:bg-success hover:text-white">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-warning text-warning hover:bg-warning hover:text-white">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-error text-error hover:bg-error hover:text-white">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-gray-800 dark:border-white text-gray-800 hover:bg-gray-900 hover:text-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
      <button type="button" class=" flex justify-center items-center size-[62px] rounded-md border border-gray-500 dark:border-gray-400 dark:text-gray-400 text-gray-500 hover:bg-gray-600 hover:text-white dark:hover:bg-gray-400 dark:hover:text-white">
      <i class="ti ti-file-text text-2xl"></i>
      </button>
    </div>

Disabled

Disabled - View Code

   
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" disabled>
  Solid
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:border-primary hover:text-primary disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:text-gray-400 dark:hover:text-lightprimary dark:hover:border-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" disabled>
  Outline
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent text-primary hover:bg-blue-100 hover:text-darkprimary disabled:opacity-50 disabled:pointer-events-none dark:text-lightprimary dark:hover:bg-blue-800/30 dark:hover:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" disabled>
  Ghost
  </button>
  <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-lightprimary text-darkprimary hover:bg-lightprimary disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-darkprimary dark:bg-darkprimary dark:text-lightprimary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" disabled>
  Soft
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800  hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" disabled>
  White
  </button>
  <button type="button" class="btn-md text-sm font-semibold rounded-lg border border-transparent text-primary hover:text-darkprimary disabled:opacity-50 disabled:pointer-events-none dark:text-primary dark:hover:text-lightprimary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" disabled>
  Link
  </button>

Make buttons look inactive by adding the 'disabled' boolean attribute to any '<button>' classes will make the button fit to its parent width.

Loading Button with Text

Loading Button with Text - View Code

   
  <button type="button" class="btn-md inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
  Loading
  </button>
  <button type="button" class="btn-md inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-secondary text-white hover:bg-secondaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
  Loading
  </button>
  <button type="button" class="btn-md inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-success text-white hover:bg-successemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
  Loading
  </button>
  <button type="button" class="btn-md inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-warning text-white hover:bg-warningemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
  Loading
  </button>
  <button type="button" class="btn-md inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-error text-white hover:bg-erroremphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
  Loading
  </button>
  <button type="button" class="btn-md inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:bg-white dark:text-gray-800">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
  Loading
  </button>
  <button type="button" class="btn-md inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-gray-500 text-white hover:bg-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
  Loading
  </button>

Loading Button

Loading Button - View Code

   
  <button type="button" class="flex justify-center items-center btn-md text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
  </span>
  </button>
  <button type="button" class="flex justify-center items-center btn-md text-sm font-semibold rounded-lg border border-transparent bg-secondary text-white hover:bg-secondaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
  </span>
  </button>
  <button type="button" class="flex justify-center items-center btn-md text-sm font-semibold rounded-lg border border-transparent bg-success text-white hover:bg-successemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
  </span>
  </button>
  <button type="button" class="flex justify-center items-center btn-md text-sm font-semibold rounded-lg border border-transparent bg-warning text-white hover:bg-warningemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
  </span>
  </button>
  <button type="button" class="flex justify-center items-center btn-md text-sm font-semibold rounded-lg border border-transparent bg-error text-white hover:bg-erroremphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
  </span>
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:bg-white dark:text-gray-800">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
  </span>
  </button>
  <button type="button" class="btn-md text-sm font-medium rounded-lg border border-transparent bg-gray-500 text-white hover:bg-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
  <span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
  </span>
  </button>

Button Group

Button Group - View Code

   
  <div class="inline-flex rounded-lg ">
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800   hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Years
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800   hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Month
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800   hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Date
    </button>
  </div>
  <div class="inline-flex rounded-lg ">
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightprimary text-primary hover:text-white dark:hover:text-white   hover:bg-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-darkprimary dark:text-primary dark:hover:bg-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-primaryemphasis">
    Years
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightprimary text-primary hover:text-white dark:hover:text-white  hover:bg-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-darkprimary  dark:text-primary dark:hover:bg-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-primaryemphasis">
    Month
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightprimary text-primary hover:text-white dark:hover:text-white  hover:bg-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-darkprimary  dark:text-primary dark:hover:bg-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-primaryemphasis">
    Date
    </button>
  </div>
  <div class="inline-flex rounded-lg ">
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightsecondary text-secondary hover:text-white dark:hover:text-white   hover:bg-secondary disabled:opacity-50 disabled:pointer-events-none dark:bg-darksecondary dark:text-secondary dark:hover:bg-secondary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-secondaryemphasis">
    <i class="ti ti-align-left text-base"></i>
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightsecondary text-secondary hover:text-white dark:hover:text-white  hover:bg-secondary disabled:opacity-50 disabled:pointer-events-none dark:bg-darksecondary  dark:text-secondary dark:hover:bg-secondary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-secondaryemphasis">
    <i class="ti ti-align-justified text-base"></i>
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightsecondary text-secondary hover:text-white dark:hover:text-white  hover:bg-secondary disabled:opacity-50 disabled:pointer-events-none dark:bg-darksecondary  dark:text-secondary dark:hover:bg-secondary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-secondaryemphasis">
    <i class="ti ti-align-right text-base"></i>
    </button>
  </div>
  <div class="inline-flex rounded-lg ">
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightsuccess text-success hover:text-white dark:hover:text-white   hover:bg-success disabled:opacity-50 disabled:pointer-events-none dark:bg-darksuccess dark:text-success dark:hover:bg-success dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-successemphasis">
    <i class="ti ti-player-skip-back text-base"></i>
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightsuccess text-success hover:text-white dark:hover:text-white  hover:bg-success disabled:opacity-50 disabled:pointer-events-none dark:bg-darksuccess  dark:text-success dark:hover:bg-success dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-successemphasis">
    <i class="ti ti-player-play text-base"></i>
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-transparent bg-lightsuccess text-success hover:text-white dark:hover:text-white  hover:bg-success disabled:opacity-50 disabled:pointer-events-none dark:bg-darksuccess  dark:text-success dark:hover:bg-success dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-successemphasis">
    <i class="ti ti-player-skip-forward text-base"></i>
    </button>
  </div>

Button Group sizes

Button Group sizes - View Code

   
  <div class="inline-flex rounded-lg ">
    <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-xs font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Small
    </button>
    <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-xs font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Small
    </button>
    <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-xs font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Small
    </button>
  </div>
  <div class="inline-flex rounded-lg ">
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Default
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Default
    </button>
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Default
    </button>
  </div>
  <div class="inline-flex rounded-lg ">
    <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-lg font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Large
    </button>
    <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-lg font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Large
    </button>
    <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-lg font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Large
    </button>
  </div>

Toolbar

Toolbar - View Code

   
  <div class="flex align-middle gap-x-0.5 p-2">
    <button class="ql-bold size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-bold text-lg"></i>
    </button>
    <button class="ql-italic size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" type="button">
    <i class="ti ti-italic text-lg"></i>
    </button>
    <button class="ql-underline size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" type="button">
    <i class="ti ti-underline text-lg"></i>
    </button>
    <button class="ql-strike size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" type="button">
    <i class="ti ti-strikethrough text-lg"></i>
    </button>
    <button class="ql-link size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" type="button">
    <i class="ti ti-link text-lg"></i>
    </button>
    <button class="ql-list size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" value="ordered" type="button">
    <i class="ti ti-list-numbers text-lg"></i>
    </button>
    <button class="ql-list size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" value="bullet" type="button">
    <i class="ti ti-list text-lg"></i>
    </button>
    <button class="ql-blockquote size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" type="button">
    <i class="ti ti-align-right text-lg"></i>
    </button>
    <button class="ql-code size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" type="button">
    <i class="ti ti-code text-lg"></i>
    </button>
  </div>

WYSIWYG Editor toolbar button group.

Circular Button

Circular Button - View Code

   
  <div class="inline-flex border border-gray-200 rounded-full p-0.5 dark:border-gray-700">
    <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-gray-500 hover:bg-blue-100 hover:text-primaryemphasis focus:z-10 focus:outline-none focus:ring-2 focus:ring-primary dark:hover:bg-darkprimary dark:hover:text-blue-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-thumb-up text-xl"></i>
    </button>
    <button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-gray-500 hover:bg-blue-100 hover:text-primaryemphasis focus:z-10 focus:outline-none focus:ring-2 focus:ring-primary dark:hover:bg-darkprimary dark:hover:text-blue-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <i class="ti ti-thumb-down text-xl"></i>
    </button>
  </div>

Circlular like and dislike button styles.

Vertical Button Group

Vertical Button Group - View Code

   
  <div class=" flex flex-col rounded-lg ">
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 rounded-t-md text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Item 1
    </button>
    <button type="button" class="-mt-px py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Item 2
    </button>
    <button type="button" class="-mt-px py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Item 3
    </button>
    <button type="button" class="-mt-px py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Item 4
    </button>
    <button type="button" class="-mt-px py-2 px-4 inline-flex items-center gap-x-2 rounded-b-md text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800  hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Item 5
    </button>
  </div>
  <div class=" flex flex-col rounded-lg ">
    <button type="button" class="py-2 px-4 inline-flex items-center gap-x-2 rounded-t-md text-sm font-medium focus:z-10 border border-transparent bg-lightprimary text-primary  hover:bg-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-darkprimary dark:border-transparent dark:text-primary dark:hover:bg-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 hover:text-white dark:hover:text-white">
    Item 1
    </button>
    <button type="button" class="-mt-px py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium focus:z-10 border border-transparent bg-lightprimary text-primary  hover:bg-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-darkprimary dark:border-transparent dark:text-primary dark:hover:bg-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 hover:text-white dark:hover:text-white">
    Item 2
    </button>
    <button type="button" class="-mt-px py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium focus:z-10 border border-transparent bg-lightprimary text-primary  hover:bg-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-darkprimary dark:border-transparent dark:text-primary dark:hover:bg-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 hover:text-white dark:hover:text-white">
    Item 3
    </button>
    <button type="button" class="-mt-px py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium focus:z-10 border border-transparent bg-lightprimary text-primary  hover:bg-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-darkprimary dark:border-transparent dark:text-primary dark:hover:bg-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 hover:text-white dark:hover:text-white">
    Item 4
    </button>
    <button type="button" class="-mt-px py-2 px-4 inline-flex items-center gap-x-2 rounded-b-md text-sm font-medium focus:z-10 border border-transparent bg-lightprimary text-primary  hover:bg-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-darkprimary dark:border-transparent dark:text-primary dark:hover:bg-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 hover:text-white dark:hover:text-white">
    Item 5
    </button>
  </div>

Circlular like and dislike button styles.