app/web/src/components/CadPackage/CadPackage.tsx

@@ -46,19 +46,27 @@ const CadPackage = ({
   const cadPackageConfig = cadPackageConfigs[cadPackage]
 
   return (
-    <button
+    <ButtonOrDiv
       onClick={onClick}
       className={
-        `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30 ${
+        `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30 
-          onClick && ' hover:bg-opacity-80 '
+         ${cadPackageConfig?.buttonClasses} ` + className
-        } ${cadPackageConfig?.buttonClasses} ` + className
       }
     >
       <div
         className={`${cadPackageConfig?.dotClasses} ${dotClass} rounded-full`}
       />
       {cadPackageConfig?.label}
-    </button>
+    </ButtonOrDiv>
+  )
+}
+
+// Returns a proper button if an onClick handler is passed in, or a div
+// if the element is meant to be a simple badge
+function ButtonOrDiv({ onClick, className, children }) {
+  return (onClick
+    ? <button className={className + ' hover:bg-opacity-80'} onClick={ onClick }>{ children }</button>
+    : <div className={className}>{ children }</div>
   )
 }