Application toolkit - Buttons

Use different button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Types

The most commonly used button styles.

Open this types buttons example in new window
Copy types buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-gray-900 dark:focus:ring-offset-gray-800">
    Solid
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-hs2-primary font-semibold text-hs2-primary hover:text-white hover:bg-hs2-primary hover:border-hs2-primary focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:hover:bg-gray-900 dark:border-gray-900 dark:hover:border-gray-900 dark:text-white dark:focus:ring-gray-900 dark:focus:ring-offset-gray-800">
    Outline
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-white text-hs2-primary hover:text-white hover:bg-hs2-primary focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-gray-900 dark:focus:ring-offset-gray-800">
    Ghost
  </button>
</div>
Close types buttons code

Sizes

Buttons stacked small to large sizes.

Open this sizes buttons example in new window
Copy sizes buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="py-2 px-3 justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Small
  </button>
  <button type="button" class="py-3 px-4 justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Default
  </button>
  <button type="button" class="py-3 px-4  justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm sm:p-5 dark:focus:ring-offset-gray-800">
    Large
  </button>
</div>
Close sizes buttons code

Solid colour variants

Predefined solid color button styles.

Open this solid colour variants buttons example in new window
Copy solid colour variants buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-gray-900 dark:focus:ring-offset-gray-800">
    Primary
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-secondary text-white hover:bg-hs2-secondary-hover focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
    Secondary
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-info text-white hover:bg-hs2-info-hover focus:outline-none focus:ring-2 focus:ring-hs2-info focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Info
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Success
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-danger text-white hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Danger
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-white text-gray-600 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    White
  </button>
</div>
Close solid colour variants buttons code

Outline colour variants

Predefined outline color button styles.

Open this outline colour variants buttons example in new window
Copy outline colour variants buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-hs2-primary font-semibold text-hs2-primary hover:text-white hover:bg-hs2-primary hover:border-hs2-primary focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:hover:bg-gray-900 dark:border-gray-900 dark:hover:border-gray-900 dark:text-white dark:focus:ring-gray-900 dark:focus:ring-offset-gray-800">
    Primary
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-hs2-secondary font-semibold text-hs2-secondary hover:text-white hover:bg-hs2-secondary hover:border-hs2-secondary focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm  dark:hover:bg-gray-600 dark:border-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-600 dark:focus:ring-offset-gray-800">
    Secondary
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-hs2-info font-semibold text-hs2-info hover:text-white hover:bg-hs2-info hover:border-hs2-info focus:outline-none focus:ring-2 focus:ring-hs2-info transition-all text-sm dark:focus:ring-offset-gray-800">
    Info
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-hs2-success font-semibold text-hs2-success hover:text-white hover:bg-hs2-success hover:border-hs2-success focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Success
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-hs2-danger font-semibold text-hs2-danger hover:text-white hover:bg-hs2-danger hover:border-hs2-danger focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Danger
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-gray-600 font-semibold text-gray-600 hover:bg-white hover:border-white focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    White
  </button>
</div>
Close outline colour variants buttons code

Ghost color variants

Predefined ghost color button styles.

Open this ghost colour variants buttons example in new window
Copy ghost colour variants buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-white text-hs2-primary hover:text-white hover:bg-hs2-primary focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-gray-900 dark:focus:ring-offset-gray-800">
    Primary
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-white text-hs2-secondary hover:text-white hover:bg-hs2-secondary focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
    Secondary
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-white text-hs2-info hover:text-white hover:bg-hs2-info focus:outline-none focus:ring-2 focus:ring-hs2-info focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Info
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-white text-hs2-success hover:text-white hover:bg-hs2-success focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Success
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-white text-hs2-danger hover:text-white hover:bg-hs2-danger focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Danger
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-white text-gray-600 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    White
  </button>
</div>
Close ghost colour variants buttons code

Pilled Button

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

Open this pilled buttons example in new window
Copy pilled buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-full border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Button
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-full border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
    Button
  </button>
</div>
Close pilled buttons code

Block button

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

Open this block buttons example in new window
Copy block buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Button
  </button>
  <button type="button" class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary-hover transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
    Button
  </button>
</div>
Close block buttons code

Icon

A contained button with an icon.

Open this icon buttons example in new window
Copy icon buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    Add to cart
    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M5.071 1.243a.5.5 0 0 1 .858.514L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 6h1.717L5.07 1.243zM3.5 10.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3z" />
    </svg>
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
    Signup free
    <svg class="w-2.5 h-auto" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C0.447715 7 -3.73832e-07 7.44771 -3.49691e-07 8C-3.2555e-07 8.55228 0.447715 9 1 9L13.0858 9L7.79289 14.2929C7.40237 14.6834 7.40237 15.3166 7.79289 15.7071C8.18342 16.0976 8.81658 16.0976 9.20711 15.7071L16.0303 8.88388C16.5185 8.39573 16.5185 7.60427 16.0303 7.11612L9.20711 0.292893C8.81658 -0.0976318 8.18342 -0.0976318 7.79289 0.292893C7.40237 0.683417 7.40237 1.31658 7.79289 1.70711L13.0858 7L1 7Z" fill="currentColor" />
    </svg>
  </button>
</div>
Close icon buttons code

With fixed width and height.

Open this icon fixed width height buttons example in new window
Copy icon fixed width height buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.875rem] w-[2.875rem] rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:bg-hs2-primary focus:ring-offset-2 transition-all text-sm  dark:focus:ring-offset-gray-800">
    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M5.071 1.243a.5.5 0 0 1 .858.514L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 6h1.717L5.07 1.243zM3.5 10.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3z" />
    </svg>
  </button>
  <button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.875rem] w-[2.875rem] rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800" href="#">
    <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-blue-600 rounded-full" role="status" aria-label="loading">
      <span class="sr-only">Loading...</span>
    </span>
  </button>
</div>
Close icon fixed width height buttons code

Also available in all button sizes.

Open this icon fixed with sizes buttons example in new window
Copy icon fixed with sizes buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm  dark:focus:ring-offset-gray-800">
    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z" />
    </svg>
  </button>
  <button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.875rem] w-[2.875rem] rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm  dark:focus:ring-offset-gray-800">
    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z" />
    </svg>
  </button>
  <button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[3.875rem] w-[3.875rem] rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z" />
    </svg>
  </button>
</div>
Close icon fixed with sizes buttons code

Loading

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

Open this loading buttons example in new window
Copy loading buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.875rem] w-[2.875rem] rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm  dark:focus:ring-offset-gray-800">
    <span class="sr-only">Loading...</span>
    <span class="animate-spin inline-block w-4 h-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="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
    <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
    Loading
  </button>
</div>
Close loading buttons code

Disabled

Make buttons look inactive by adding the disabled boolean attribute and .cursor-not-allowed class to any <button> element.

Open this disabled buttons example in new window
Copy disabled buttons code 
<div class="flex flex-wrap gap-2 items-center">
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary opacity-90 text-white focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all cursor-not-allowed text-sm" disabled>
    Disabled
  </button>
  <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary-hover transition-all cursor-not-allowed text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" disabled>
    Disabled
  </button>
</div>
Close disabled buttons code