Button Switchers

Button switchers help people select one of two options or switch between two views.

Code modeVisual mode

Variations

Basic button switchers

Copy as:HTMLReact

<!-- Component: Basic lg sized button switch -->
<div class="relative inline-flex items-center rounded group bg-slate-100">
  <input class="order-2 hidden peer" type="checkbox" value="" id="id-c001" />
  <!-- First label -->
  <label class="inline-flex items-center justify-center order-1 h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition-colors rounded cursor-pointer bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 peer-checked:bg-transparent peer-checked:text-slate-500 hover:peer-checked:bg-transparent peer-checked:hover:text-slate-600 focus:peer-checked:bg-transparent" for="id-c001">
    Code mode
  </label>
  <!-- Second label -->
  <label class="inline-flex items-center justify-center order-1 h-12 gap-2 px-6 text-sm font-medium tracking-wide transition-colors bg-transparent rounded cursor-pointer text-slate-500 hover:text-slate-600 peer-checked:bg-emerald-500 peer-checked:text-white hover:peer-checked:bg-emerald-600 peer-checked:hover:text-white focus:peer-checked:bg-emerald-700" for="id-c001">
    Visual mode
  </label>
</div>
<!-- End Basic lg sized button switch -->

Fully rounded button switchers

Copy as:HTMLReact

<!-- Component: Fully rounded lg sized button switch -->
<div class="relative inline-flex items-center rounded-full group bg-slate-100">
  <input class="order-2 hidden peer" type="checkbox" value="" id="id-c0010" />
  <!-- First label -->
  <label class="inline-flex items-center justify-center order-1 h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition-colors rounded-full cursor-pointer bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 peer-checked:bg-transparent peer-checked:text-slate-500 hover:peer-checked:bg-transparent peer-checked:hover:text-slate-600 focus:peer-checked:bg-transparent" for="id-c0010">
    Code mode
  </label>
  <!-- Second label -->
  <label class="inline-flex items-center justify-center order-1 h-12 gap-2 px-6 text-sm font-medium tracking-wide transition-colors bg-transparent rounded-full cursor-pointer text-slate-500 hover:text-slate-600 peer-checked:bg-emerald-500 peer-checked:text-white hover:peer-checked:bg-emerald-600 peer-checked:hover:text-white focus:peer-checked:bg-emerald-700" for="id-c0010">
    Visual mode
  </label>
</div>
<!-- End Fully rounded lg sized button switch -->

Usage

Button switchers can have two segments. Each segment is clearly divided and contains label text, an icon, or both.

Specs

Button switchers come in 6 styles (basic, leading icon, trailing icon, basic rounded, leading icon rounded and trailing icon rounded) They can contain text, leading or trailing icons. All variations come in 3 sizes:

Small: 2rem height (32px), 1rem (16px) horizontal padding and 0.75rem (12px) font size. Icons on small buttons are 1rem (16px) wide and tall and have a 0.5rem (8px) distance from the text.
Base: 2.5rem height (40px), 1.25rem (20px) horizontal padding and 0.875rem (14px) font size. Icons on base buttons are 1.25rem (20px) wide and tall and have a 0.5rem (8px) distance from the text.
Large: 3rem height (48px), 1.5rem (24px) horizontal padding and 0.875rem (14px) font size. Icons on large buttons are 1.25rem (20px) wide and tall and have a 0.5rem (8px) distance from the text.

Accessibility notes

Button switchers are built with the native <input type="checkbox"> element. Two labels to express the states are used and point to the same input element.