Switch

Overview

A switch is a cross between a toggle and a tab that allows users to choose between a set of options to load and display content or change settings without leaving the page. One option should always be enabled by default.

Default

<div className="switch border-2 border-gray-200 rounded-xl overflow-hidden">
  <button className="py-3 px-4 ease-in-out duration-200">
    <span>Light</span>
  </button>
  <button className="py-3 px-4 ease-in-out duration-200">
    <span>Dark</span>
  </button>
  <button className="py-3 px-4 ease-in-out duration-200 active">
    <span>Auto</span>
  </button>
</div>

Disabled

<div className="switch border-2 border-gray-200 rounded-xl overflow-hidden">
  <button className="py-3 px-4 active">
    <span>Light</span>
  </button>
  <button className="py-3 px-4 disabled">
    <span>Dark</span>
  </button>
</div>

Sizes

<div className="switch border-2 border-gray-200 rounded-xl text-sm overflow-hidden">
  <button className="py-2 px-3 ease-in-out duration-200 active">
    <span>Light</span>
  </button>
  <button className="py-2 px-3 ease-in-out duration-200">
    <span>Dark</span>
  </button>
</div>
<div className="switch border-2 border-gray-200 rounded-xl overflow-hidden">
  <button className="py-3 px-4 ease-in-out duration-200 active">
    <span>Light</span>
  </button>
  <button className="py-3 px-4 ease-in-out duration-200">
    <span>Dark</span>
  </button>
</div>
<div className="switch border-2 border-gray-200 rounded-2xl text-lg overflow-hidden">
  <button className="py-4 px-5 ease-in-out duration-200 active">
    <span>Light</span>
  </button>
  <button className="py-4 px-5 ease-in-out duration-200">
    <span>Dark</span>
  </button>
</div>