Myna UI

Switches

Basic

Last Edited on January 25, 2022

<button
  type="button"
  role="switch"
  aria-checked="false"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>

With Icon

Last Edited on January 25, 2022

<button
  type="button"
  role="switch"
  aria-checked="false"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none flex h-4 w-4 translate-x-0 items-center justify-center rounded-full bg-white transition will-change-transform">
    <svg class="h-2.5 w-2.5 shrink-0 stroke-gray-600" viewBox="0 0 256 256">
      <line
        x1="200"
        y1="56"
        x2="56"
        y2="200"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="36"></line>
      <line
        x1="200"
        y1="200"
        x2="56"
        y2="56"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="36"></line>
    </svg>
  </span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none flex h-4 w-4 translate-x-3 items-center justify-center rounded-full bg-white transition will-change-transform">
    <svg class="h-2.5 w-2.5 shrink-0 stroke-blue-700" viewBox="0 0 256 256">
      <polyline
        points="216 72 104 184 48 128"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="36"
        fill="none"></polyline>
    </svg>
  </span>
</button>

With Label

Last Edited on January 25, 2022

Delete my account
Delete my account
<div class="flex items-center space-x-2">
  <button
    type="button"
    role="switch"
    aria-checked="false"
    class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
    <span
      aria-hidden="true"
      class="pointer-events-none inline-block h-4 w-4 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
  </button>
  <span class="text-sm font-medium text-gray-700">Delete my account</span>
</div>

<div class="flex items-center space-x-2">
  <button
    type="button"
    role="switch"
    aria-checked="true"
    class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
    <span
      aria-hidden="true"
      class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
  </button>
  <span class="text-sm font-medium text-gray-700">Delete my account</span>
</div>

Sizes

Last Edited on January 25, 2022

<button
  type="button"
  role="switch"
  aria-checked="false"
  class="relative inline-flex h-3 w-6 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-2 w-2 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-3 w-6 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-2 w-2 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="false"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="false"
  class="relative inline-flex h-7 w-12 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-6 w-6 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-7 w-12 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-6 w-6 translate-x-5 rounded-full bg-white transition will-change-transform"></span>
</button>

Colors

Last Edited on January 25, 2022

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-red-700 transition focus:outline-none focus:ring focus:ring-red-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-emerald-700 transition focus:outline-none focus:ring focus:ring-emerald-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-yellow-700 transition focus:outline-none focus:ring focus:ring-yellow-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-700 transition focus:outline-none focus:ring focus:ring-gray-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>

<button
  type="button"
  role="switch"
  aria-checked="true"
  class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-pink-700 transition focus:outline-none focus:ring focus:ring-pink-200">
  <span
    aria-hidden="true"
    class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>