View toggle

Two-up segmented control on /sessions for switching between Grouped and Timeline views. Mono uppercase microtype matches the dashboard label system.

Preview

Source

apps/docs/app/recipes/view-toggle/recipe.tsx

export default function ViewToggleRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <div className="bg-surface-2 border-stroke inline-flex gap-0.5 rounded-lg border p-[3px]">
        <button
          type="button"
          className="bg-surface-3 text-ink-1 tracking-label text-2xs inline-flex h-7 items-center rounded-md px-3 font-mono font-bold uppercase shadow-[inset_0_0_0_1px_var(--color-border)]"
        >
          Grouped
        </button>
        <button
          type="button"
          className="text-ink-3 tracking-label text-2xs inline-flex h-7 items-center rounded-md px-3 font-mono font-bold uppercase"
        >
          Timeline
        </button>
      </div>
    </div>
  );
}

export default function ViewToggleRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <div className="bg-surface-2 border-stroke inline-flex gap-0.5 rounded-lg border p-[3px]">
        <button
          type="button"
          className="bg-surface-3 text-ink-1 tracking-label text-2xs inline-flex h-7 items-center rounded-md px-3 font-mono font-bold uppercase shadow-[inset_0_0_0_1px_var(--color-border)]"
        >
          Grouped
        </button>
        <button
          type="button"
          className="text-ink-3 tracking-label text-2xs inline-flex h-7 items-center rounded-md px-3 font-mono font-bold uppercase"
        >
          Timeline
        </button>
      </div>
    </div>
  );
}