Recipe

Segmented Control

A single-select control that behaves like radio buttons but looks like a unified pill bar.

Structure

Wrap equal-width buttons in a flex container with a subtle background. The active segment gets a contrasting pill and a colored shadow. Inactive segments stay muted.

Tailwind classes

<div className="flex rounded-lg bg-gray-900 p-1">
  <button className="flex-1 rounded-md bg-violet-500
    px-4 py-2 text-sm font-medium text-white
    shadow-lg shadow-violet-500/25">
    Daily
  </button>
  <button className="flex-1 rounded-md px-4 py-2
    text-sm font-medium text-gray-400">
    Weekly
  </button>
</div>

When to use

Filtering a dashboard view by time range
Toggling between 2–5 mutually exclusive options
Replacing a traditional radio group for a cleaner look