feat: FIT-1433: Consolidate Badge component

web/apps/labelstudio/src/pages/CreateProject/Config/TemplatesList.jsx

@@ -3,8 +3,8 @@ import { Spinner } from "../../../components";
 import { useAPI } from "../../../providers/ApiProvider";
 import { cn } from "../../../utils/bem";
 import "./Config.scss";
-import { IconInfo } from "@humansignal/icons";
-import { Button, EnterpriseBadge } from "@humansignal/ui";
+import { IconInfo, IconSpark } from "@humansignal/icons";
+import { Button, Badge } from "@humansignal/ui";
 
 const listClass = cn("templates-list");
 
@@ -39,7 +39,11 @@ const TemplatesInGroup = ({ templates, group, onSelectRecipe, isEdition }) => {
             <img src={recipe.image} alt={""} />
             <div className="flex flex-col items-center w-full">
               <h3 className="flex flex-1 justify-center text-center w-full">{recipe.title}</h3>
-              {isEnterpriseTemplate && isCommunityEdition && <EnterpriseBadge className="mb-base" />}
+              {isEnterpriseTemplate && isCommunityEdition && (
+                <Badge variant="gradient" icon={<IconSpark />} className="mb-base">
+                  Enterprise
+                </Badge>
+              )}
             </div>
           </li>
         );

web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx

@@ -1,4 +1,5 @@
-import { EnterpriseBadge, Select, Typography } from "@humansignal/ui";
+import { Badge, Select, Typography } from "@humansignal/ui";
+import { IconSpark } from "@humansignal/icons";
 import React from "react";
 import { useHistory } from "react-router";
 import { ToggleItems } from "../../components";
@@ -59,7 +60,9 @@ const ProjectName = ({ name, setName, onSaveName, onSubmit, error, description,
         <div className="w-full flex flex-col gap-2">
           <label>
             Workspace
-            <EnterpriseBadge className="ml-2" />
+            <Badge variant="gradient" icon={<IconSpark />} className="ml-tight">
+              Enterprise
+            </Badge>
           </label>
           <Select placeholder="Select an option" disabled options={[]} triggerClassName="!flex-1" />
           <Typography size="small" className="mt-tight mb-wider">

web/apps/labelstudio/src/pages/ExportPage/ExportPage.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import { useHistory } from "react-router";
-import { Button } from "@humansignal/ui";
+import { Button, Badge } from "@humansignal/ui";
 import {
   IconWarningCircleFilled,
   IconTerminal,
@@ -229,11 +229,24 @@ const FormatInfo = ({ availableFormats, selected, onClick }) => {
               {format.title}
 
               <Space size="small">
-                {format.tags?.map?.((tag, index) => (
-                  <div key={index} className={cn("formats").elem("tag").toClassName()}>
-                    {tag}
-                  </div>
-                ))}
+                {format.tags?.map?.((tag, index) => {
+                  // Map tag text to badge variant
+                  const tagLower = tag?.toLowerCase() || "";
+                  let variant = "primary";
+                  if (tagLower === "enterprise" || tagLower.includes("enterprise")) {
+                    variant = "gradient";
+                  } else if (tagLower === "beta") {
+                    variant = "plum";
+                  } else if (tagLower === "new" || tagLower.includes("new")) {
+                    variant = "positive";
+                  }
+
+                  return (
+                    <Badge key={index} variant={variant} size="small">
+                      {tag}
+                    </Badge>
+                  );
+                })}
               </Space>
             </div>
 

web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx

@@ -1,4 +1,5 @@
-import { EnterpriseBadge, Select, Typography } from "@humansignal/ui";
+import { Badge, Select, Typography, Tooltip } from "@humansignal/ui";
+import { IconSpark } from "@humansignal/icons";
 import { useCallback, useContext } from "react";
 import { Button } from "@humansignal/ui";
 import { Form, Input, TextArea } from "../../components/Form";
@@ -37,7 +38,9 @@ export const GeneralSettings = () => {
                 <div className={cn("workspace-placeholder").toClassName()}>
                   <div className={cn("workspace-placeholder").elem("badge-wrapper").toClassName()}>
                     <div className={cn("workspace-placeholder").elem("title").toClassName()}>Workspace</div>
-                    <EnterpriseBadge className="ml-2" />
+                    <Badge variant="gradient" icon={<IconSpark />} size="small" className="ml-2">
+                      Enterprise
+                    </Badge>
                   </div>
                   <Select placeholder="Select an option" disabled options={[]} />
                   <Typography size="small" className="my-tight">
@@ -82,7 +85,16 @@ export const GeneralSettings = () => {
                     value=""
                     label={
                       <>
-                        Uncertainty sampling <EnterpriseBadge className="ml-2" />
+                        Uncertainty sampling{" "}
+                        <Tooltip title="Available on Label Studio Enterprise">
+                          <Badge
+                            variant="enterprise"
+                            icon={<IconSpark />}
+                            size="small"
+                            style="ghost"
+                            className="ml-tightest"
+                          />
+                        </Tooltip>
                       </>
                     }
                     disabled

web/apps/labelstudio/src/pages/Settings/StorageSettings/providers/azure_spi.tsx

@@ -1,4 +1,4 @@
-import { EnterpriseBadge, IconSpark } from "@humansignal/ui";
+import { Badge, IconSpark } from "@humansignal/ui";
 import { Alert, AlertTitle, AlertDescription } from "@humansignal/shad/components/ui/alert";
 import { IconCloudProviderAzure } from "@humansignal/icons";
 import type { ProviderConfig } from "@humansignal/app-common/blocks/StorageProviderForm/types/provider";
@@ -10,7 +10,7 @@ const azureSpiProvider: ProviderConfig = {
     "Configure your Azure Blob Storage connection using Service Principal authentication for enhanced security (proxy only)",
   icon: IconCloudProviderAzure,
   disabled: true,
-  badge: <EnterpriseBadge />,
+  badge: <Badge variant="gradient">Enterprise</Badge>,
   fields: [
     {
       name: "enterprise_info",

web/apps/labelstudio/src/pages/Settings/StorageSettings/providers/databricks.tsx

@@ -1,4 +1,4 @@
-import { EnterpriseBadge, IconSpark } from "@humansignal/ui";
+import { Badge, IconSpark } from "@humansignal/ui";
 import { Alert, AlertTitle, AlertDescription } from "@humansignal/shad/components/ui/alert";
 import { IconCloudProviderDatabricks } from "@humansignal/icons";
 import type { ProviderConfig } from "@humansignal/app-common/blocks/StorageProviderForm/types/provider";
@@ -9,7 +9,7 @@ const databricksProvider: ProviderConfig = {
   description: "Configure your Databricks Unity Catalog Volumes connection with all required settings (proxy only)",
   icon: IconCloudProviderDatabricks,
   disabled: true,
-  badge: <EnterpriseBadge />,
+  badge: <Badge variant="gradient">Enterprise</Badge>,
   fields: [
     {
       name: "enterprise_info",

web/apps/labelstudio/src/pages/Settings/StorageSettings/providers/gcswif.tsx

@@ -1,4 +1,4 @@
-import { EnterpriseBadge, IconSpark } from "@humansignal/ui";
+import { Badge, IconSpark } from "@humansignal/ui";
 import { Alert, AlertTitle, AlertDescription } from "@humansignal/shad/components/ui/alert";
 import { IconCloudProviderGCS } from "@humansignal/icons";
 import type { ProviderConfig } from "@humansignal/app-common/blocks/StorageProviderForm/types/provider";
@@ -10,7 +10,7 @@ const gcsWifProvider: ProviderConfig = {
     "Configure your Google Cloud Storage connection with Workload Identity Federation authentication (proxy only)",
   icon: IconCloudProviderGCS,
   disabled: true,
-  badge: <EnterpriseBadge />,
+  badge: <Badge variant="gradient">Enterprise</Badge>,
   fields: [
     {
       name: "enterprise_info",

web/apps/labelstudio/src/pages/Settings/StorageSettings/providers/s3s.tsx

@@ -1,4 +1,4 @@
-import { EnterpriseBadge, IconSpark } from "@humansignal/ui";
+import { Badge, IconSpark } from "@humansignal/ui";
 import { Alert, AlertTitle, AlertDescription } from "@humansignal/shad/components/ui/alert";
 import { IconCloudProviderS3 } from "@humansignal/icons";
 import type { ProviderConfig } from "@humansignal/app-common/blocks/StorageProviderForm/types/provider";
@@ -9,7 +9,7 @@ const s3sProvider: ProviderConfig = {
   description: "Configure your AWS S3 connection using IAM role access for enhanced security (proxy only)",
   icon: IconCloudProviderS3,
   disabled: true,
-  badge: <EnterpriseBadge />,
+  badge: <Badge variant="gradient">Enterprise</Badge>,
   fields: [
     {
       name: "enterprise_info",

web/apps/labelstudio/src/pages/Settings/settings.scss

@@ -85,6 +85,7 @@
     font-size: 0.875rem;
     color: var(--color-neutral-content);
     font-weight: 500;
+    line-height: var(--line-height-label-small);
   }
 }