Sort button

Compact dropdown trigger paired with chip rows in /problems and /sessions toolbars. The italic muted prefix labels the axis (Sort, Level) without occupying a separate line.

Preview

Source

apps/docs/app/recipes/sort-btn/recipe.tsx

export default function SortBtnRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <button
        type="button"
        className="bg-surface-2 border-stroke text-ink-1 inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-xs"
      >
        <span className="text-ink-3 italic">Sort:</span>
        Default
        <span className="text-ink-3" aria-hidden>
          ▾
        </span>
      </button>
      <button
        type="button"
        className="bg-surface-2 border-stroke text-ink-1 inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-xs"
      >
        <span className="text-ink-3 italic">Level:</span>
        All
        <span className="text-ink-3" aria-hidden>
          ▾
        </span>
      </button>
    </div>
  );
}

export default function SortBtnRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <button
        type="button"
        className="bg-surface-2 border-stroke text-ink-1 inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-xs"
      >
        <span className="text-ink-3 italic">Sort:</span>
        Default
        <span className="text-ink-3" aria-hidden>
          ▾
        </span>
      </button>
      <button
        type="button"
        className="bg-surface-2 border-stroke text-ink-1 inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-xs"
      >
        <span className="text-ink-3 italic">Level:</span>
        All
        <span className="text-ink-3" aria-hidden>
          ▾
        </span>
      </button>
    </div>
  );
}