Myna UI

Buttons

Basic

Last Edited on January 25, 2022

<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
  Button
</button>

Basic Button Sizes

Last Edited on January 25, 2022

<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-2 py-1 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
  Extra Small
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-2 py-1 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
  Small
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
  Base
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-4 py-3 text-base font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
  Large
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-5 py-4 text-lg font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
  Extra Large
</button>

Primary

Last Edited on January 25, 2022

<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-2 py-1 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  Extra Small
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-2 py-1 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  Small
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  Base
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-4 py-3 text-base font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  Large
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-5 py-4 text-lg font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  Extra Large
</button>

Prefix Icon

Last Edited on January 25, 2022

<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-2 py-1 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <svg class="h-3 w-3 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
  <span>Extra Small</span>
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-2 py-1 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <svg class="h-3.5 w-3.5 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
  <span>Small</span>
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <svg class="h-4 w-4 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
  <span>Base</span>
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-4 py-3 text-base font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <svg class="h-5 w-5 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
  <span>Large</span>
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-5 py-4 text-lg font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <svg class="h-6 w-6 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
  <span>Extra Large</span>
</button>

Suffix Icon

Last Edited on January 25, 2022

<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-2 py-1 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <span>Extra Small</span>
  <svg class="h-3 w-3 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-2 py-1 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <span>Small</span>
  <svg class="h-3.5 w-3.5 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <span>Base</span>
  <svg class="h-4 w-4 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-4 py-3 text-base font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <span>Large</span>
  <svg class="h-5 w-5 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
</button>
<button
  type="button"
  class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded border border-blue-700 bg-blue-700 px-5 py-4 text-lg font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
  <span>Extra Large</span>
  <svg class="h-6 w-6 stroke-white" viewBox="0 0 256 256">
    <circle
      cx="116"
      cy="116"
      r="84"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></circle>
    <line
      x1="175.4"
      y1="175.4"
      x2="224"
      y2="224"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24"></line>
  </svg>
</button>