Filter chip

Single-select filter pills for catalog headers (Level, Domain) and other list views. Active state uses brand overlay tokens for soft, on-brand emphasis that does not compete with primary buttons.

Preview

Source

apps/docs/app/recipes/chip/recipe.tsx

export default function ChipRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <button
        type="button"
        className="text-brand-soft bg-brand-wash inline-flex h-9 items-center rounded-lg border border-[var(--color-brand-overlay-30)] px-3 text-xs font-medium capitalize transition-colors"
      >
        All
      </button>
      {(['L1', 'L2', 'L3', 'L4'] as const).map((label) => (
        <button
          key={label}
          type="button"
          className="border-stroke text-ink-3 hover:border-stroke-2 hover:text-ink-2 inline-flex h-9 items-center rounded-lg border px-3 text-xs font-medium capitalize transition-colors"
        >
          {label}
        </button>
      ))}
    </div>
  );
}

export default function ChipRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <button
        type="button"
        className="text-brand-soft bg-brand-wash inline-flex h-9 items-center rounded-lg border border-[var(--color-brand-overlay-30)] px-3 text-xs font-medium capitalize transition-colors"
      >
        All
      </button>
      {(['L1', 'L2', 'L3', 'L4'] as const).map((label) => (
        <button
          key={label}
          type="button"
          className="border-stroke text-ink-3 hover:border-stroke-2 hover:text-ink-2 inline-flex h-9 items-center rounded-lg border px-3 text-xs font-medium capitalize transition-colors"
        >
          {label}
        </button>
      ))}
    </div>
  );
}