Merge pull request #4749 from Infisical/migrate-badge-component

feature(front-end): v3 Badge migration, additional stories/variants, and misc styling fixes/improvements

frontend/.storybook/decorators/DocumentDecorator.tsx

@@ -3,7 +3,7 @@ import type { Decorator } from "@storybook/react-vite";
 
 export const DocumentDecorator: Decorator = (Story) => {
   useEffect(() => {
-    const root = document.getElementsByTagName("html")[0];
+    const root = document.documentElement;
 
     root.setAttribute("class", "overflow-visible");
   }, []);

frontend/src/components/app-connections/AppConnectionOption.tsx

@@ -1,9 +1,11 @@
 import { components, OptionProps } from "react-select";
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
-import { faBuilding, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Badge, Tooltip } from "@app/components/v2";
+import { Tooltip } from "@app/components/v2";
+import { Badge, OrgIcon, SubOrgIcon } from "@app/components/v3";
+import { useOrganization } from "@app/context";
 import { TAvailableAppConnection } from "@app/hooks/api/appConnections";
 
 export const AppConnectionOption = ({
@@ -13,6 +15,8 @@ export const AppConnectionOption = ({
 }: OptionProps<TAvailableAppConnection>) => {
   const isCreateOption = props.data.id === "_create";
 
+  const { isSubOrganization } = useOrganization();
+
   return (
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
@@ -23,15 +27,22 @@ export const AppConnectionOption = ({
           </div>
         ) : (
           <>
-            <p className="truncate">{children}</p>
+            <p className="mr-auto truncate">{children}</p>
             {!props.data.projectId && (
-              <Tooltip content="This connection belongs to your organization.">
+              <Tooltip
-                <div className="mr-auto ml-2">
+                content={`This connection belongs to your ${isSubOrganization ? "sub-" : ""}organization.`}
-                  <Badge className="flex h-5 w-min items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300 hover:text-bunker-300">
+              >
-                    <FontAwesomeIcon icon={faBuilding} size="sm" />
+                {isSubOrganization ? (
+                  <Badge variant="sub-org">
+                    <SubOrgIcon />
+                    Sub-Organization
+                  </Badge>
+                ) : (
+                  <Badge variant="org">
+                    <OrgIcon />
                     Organization
                   </Badge>
-                </div>
+                )}
               </Tooltip>
             )}
             {isSelected && (

frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
-  faCheck,
-  faDownload,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { differenceInSeconds } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { CheckIcon, DownloadIcon, LucideIcon, TriangleAlertIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
+import { Tooltip } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { PkiSyncStatus, TPkiSync } from "@app/hooks/api/pkiSyncs";
 
 type Props = {
   pkiSync: TPkiSync;
-  className?: string;
   mini?: boolean;
 };
 
-export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) => {
+export const PkiSyncImportStatusBadge = ({ pkiSync, mini }: Props) => {
   const { importStatus, lastImportMessage, lastImportedAt, destination } = pkiSync;
   const [hide, setHide] = useState(importStatus === PkiSyncStatus.Succeeded);
   const destinationName = PKI_SYNC_MAP[destination].name;
@@ -50,24 +43,24 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) =>
 
   if (!importStatus || hide) return null;
 
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let label: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
   let tooltipContent: ReactNode;
 
   switch (importStatus) {
     case PkiSyncStatus.Pending:
     case PkiSyncStatus.Running:
-      variant = "primary";
+      variant = "warning";
       label = "Importing Certificates...";
       tooltipContent = `Importing certificates from ${destinationName}. This may take a moment.`;
-      icon = faDownload;
+      Icon = DownloadIcon;
 
       break;
     case PkiSyncStatus.Failed:
       variant = "danger";
       label = "Failed to Import Certificates";
-      icon = faTriangleExclamation;
+      Icon = TriangleAlertIcon;
       tooltipContent = (
         <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
@@ -93,20 +86,15 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) =>
       tooltipContent = "Successfully imported certificates.";
       variant = "success";
       label = "Certificates Imported";
-      icon = faCheck;
+      Icon = CheckIcon;
   }
 
   return (
     <Tooltip position="bottom" className="max-w-sm" content={tooltipContent}>
-      <div>
+      <Badge isSquare={mini} variant={variant}>
-        <Badge
+        <Icon />
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
+        {!mini && label}
-          variant={variant}
+      </Badge>
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
     </Tooltip>
   );
 };

frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { DocumentationLinkBadge } from "@app/components/v3";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { PkiSync } from "@app/hooks/api/pkiSyncs";
 
@@ -20,23 +18,11 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
         className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {destinationDetails.name} Certificate Sync
-          <a
+          <DocumentationLinkBadge
-            target="_blank"
+            href={`https://infisical.com/docs/documentation/platform/pki/certificate-syncs/${destination}`}
-            href={`https://infisical.com/docs/integrations/pki-syncs/${destination}`}
+          />
-            className="mb-1 ml-1"
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured

frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
-  faCheck,
-  faEraser,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { differenceInSeconds } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { AlertTriangleIcon, CheckIcon, EraserIcon, LucideIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
+import { Tooltip } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { PkiSyncStatus, TPkiSync } from "@app/hooks/api/pkiSyncs";
 
 type Props = {
   pkiSync: TPkiSync;
-  className?: string;
   mini?: boolean;
 };
 
-export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) => {
+export const PkiSyncRemoveStatusBadge = ({ pkiSync, mini }: Props) => {
   const { removeStatus, lastRemoveMessage, lastRemovedAt, destination } = pkiSync;
   const [hide, setHide] = useState(removeStatus === PkiSyncStatus.Succeeded);
   const destinationName = PKI_SYNC_MAP[destination].name;
@@ -50,24 +43,24 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) =>
 
   if (!removeStatus || hide) return null;
 
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let label: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
   let tooltipContent: ReactNode;
 
   switch (removeStatus) {
     case PkiSyncStatus.Pending:
     case PkiSyncStatus.Running:
-      variant = "primary";
+      variant = "warning";
       label = "Removing Certificates...";
       tooltipContent = `Removing certificates from ${destinationName}. This may take a moment.`;
-      icon = faEraser;
+      Icon = EraserIcon;
 
       break;
     case PkiSyncStatus.Failed:
       variant = "danger";
       label = "Failed to Remove Certificates";
-      icon = faTriangleExclamation;
+      Icon = AlertTriangleIcon;
       tooltipContent = (
         <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
@@ -93,20 +86,15 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) =>
       tooltipContent = "Successfully removed certificates.";
       variant = "success";
       label = "Certificates Removed";
-      icon = faCheck;
+      Icon = CheckIcon;
   }
 
   return (
     <Tooltip position="bottom" className="max-w-sm" content={tooltipContent}>
-      <div>
+      <Badge isSquare={mini} variant={variant}>
-        <Badge
+        <Icon />
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
+        {!mini && label}
-          variant={variant}
+      </Badge>
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
     </Tooltip>
   );
 };

frontend/src/components/pki-syncs/PkiSyncStatusBadge.tsx

@@ -1,55 +1,51 @@
 import {
-  faCheck,
+  AlertTriangleIcon,
-  faExclamationTriangle,
+  CheckIcon,
-  faHourglass,
+  HourglassIcon,
-  faRotate,
+  LucideIcon,
-  IconDefinition
+  RefreshCwIcon
-} from "@fortawesome/free-solid-svg-icons";
+} from "lucide-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Badge, BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { PkiSyncStatus } from "@app/hooks/api/pkiSyncs";
 
 type Props = {
   status: PkiSyncStatus;
-} & Omit<BadgeProps, "children" | "variant">;
+} & Omit<TBadgeProps, "children" | "variant">;
 
 export const PkiSyncStatusBadge = ({ status }: Props) => {
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let text: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
 
   switch (status) {
     case PkiSyncStatus.Failed:
       variant = "danger";
       text = "Failed to Sync";
-      icon = faExclamationTriangle;
+      Icon = AlertTriangleIcon;
       break;
     case PkiSyncStatus.Succeeded:
       variant = "success";
       text = "Synced";
-      icon = faCheck;
+      Icon = CheckIcon;
       break;
     case PkiSyncStatus.Pending:
-      variant = "primary";
+      variant = "info";
       text = "Queued";
-      icon = faHourglass;
+      Icon = HourglassIcon;
       break;
     case PkiSyncStatus.Running:
     default:
-      variant = "primary";
+      variant = "info";
       text = "Syncing";
-      icon = faRotate;
+      Icon = RefreshCwIcon;
       break;
   }
 
   return (
-    <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
+    <Badge variant={variant}>
-      <FontAwesomeIcon
+      <Icon className={status === PkiSyncStatus.Running ? "animate-spin" : ""} />
-        icon={icon}
+      {text}
-        className={status === PkiSyncStatus.Running ? "animate-spin" : ""}
-      />
-      <span>{text}</span>
     </Badge>
   );
 };

frontend/src/components/pki-syncs/PkiSyncTable.tsx

@@ -2,7 +2,6 @@ import { faPlug, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
-  Badge,
   EmptyState,
   IconButton,
   Table,
@@ -13,6 +12,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { TPkiSync } from "@app/hooks/api/pkiSyncs";
 
 type Props = {
@@ -29,10 +29,10 @@ const getSyncStatusBadge = (status?: string) => {
     case "FAILED":
       return <Badge variant="danger">Failed</Badge>;
     case "RUNNING":
-      return <Badge variant="primary">Running</Badge>;
+      return <Badge variant="warning">Running</Badge>;
     case "PENDING":
     default:
-      return <Badge variant="primary">Pending</Badge>;
+      return <Badge variant="warning">Pending</Badge>;
   }
 };
 
@@ -71,7 +71,7 @@ export const PkiSyncTable = ({ pkiSyncs, onEdit, onDelete, onTrigger }: Props) =
               <Td>{pkiSync.name}</Td>
               <Td>
                 <div className="flex items-center space-x-2">
-                  <Badge variant="primary">{pkiSync.destination}</Badge>
+                  <Badge variant="warning">{pkiSync.destination}</Badge>
                 </div>
               </Td>
               <Td>{pkiSync.appConnectionName || "Unknown"}</Td>

frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx

@@ -1,6 +1,7 @@
 import { useFormContext } from "react-hook-form";
 
-import { Badge, GenericFieldLabel } from "@app/components/v2";
+import { GenericFieldLabel } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useProject } from "@app/context";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { useListWorkspacePkiSubscribers } from "@app/hooks/api";

frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx

@@ -1,6 +1,4 @@
 import { useEffect, useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 
 import { SecretRotationV2Form } from "@app/components/secret-rotations-v2/forms";
@@ -8,6 +6,7 @@ import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms
 import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader";
 import { SecretRotationV2Select } from "@app/components/secret-rotations-v2/SecretRotationV2Select";
 import { Modal, ModalContent } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectEnv } from "@app/hooks/api/projects/types";
 import { SecretRotation, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
 
@@ -115,23 +114,9 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
           selectedRotation ? (
             <SecretRotationV2ModalHeader isConfigured={false} type={selectedRotation} />
           ) : (
-            <div className="flex items-center text-mineshaft-300">
+            <div className="flex items-center gap-x-2 text-mineshaft-300">
               Add Secret Rotation
-              <a
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/secret-rotation/overview" />
-                target="_blank"
-                href="https://infisical.com/docs/documentation/platform/secret-rotation/overview"
-                className="mb-1 ml-1"
-                rel="noopener noreferrer"
-              >
-                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1 text-[10px]"
-                  />
-                </div>
-              </a>
             </div>
           )
         }

frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { DocumentationLinkBadge } from "@app/components/v3";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
@@ -20,23 +18,11 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
         className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {destinationDetails.name} Rotation
-          <a
+          <DocumentationLinkBadge
-            target="_blank"
             href={`https://infisical.com/docs/documentation/platform/secret-rotation/${type}`}
-            className="mb-1 ml-1"
+          />
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured

frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx

@@ -1,18 +1,17 @@
-import { faBan, faRotate, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format, formatDistanceToNow } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { BanIcon, RefreshCwIcon, XIcon } from "lucide-react";
 
 import { Tooltip } from "@app/components/v2";
-import { Badge } from "@app/components/v2/Badge/Badge";
+import { Badge } from "@app/components/v3";
 import { SecretRotationStatus, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
 
 type Props = {
   secretRotation: TSecretRotationV2;
-  className?: string;
 };
 
-export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props) => {
+export const SecretRotationV2StatusBadge = ({ secretRotation }: Props) => {
   const { isAutoRotationEnabled, rotationStatus, nextRotationAt, lastRotationMessage } =
     secretRotation;
 
@@ -50,28 +49,18 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
           </div>
         }
       >
-        <div>
+        <Badge variant="danger">
-          <Badge
+          <XIcon />
-            variant="danger"
+          Rotation Failed
-            className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
+        </Badge>
-          >
-            <FontAwesomeIcon icon={faXmark} />
-            Rotation Failed
-          </Badge>
-        </div>
       </Tooltip>
     );
   }
 
   if (!isAutoRotationEnabled) {
     return (
-      <Badge
+      <Badge variant="neutral">
-        className={twMerge(
+        <BanIcon />
-          "flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
-          className
-        )}
-      >
-        <FontAwesomeIcon icon={faBan} />
         Auto-Rotation Disabled
       </Badge>
     );
@@ -92,20 +81,12 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
         </>
       }
     >
-      <div>
+      <Badge variant={daysToRotation >= 7 ? "info" : "warning"} className="capitalize">
-        <Badge
+        <RefreshCwIcon />
-          variant={daysToRotation >= 7 ? "success" : "primary"}
+        {daysToRotation < 0
-          className={twMerge(
+          ? "Rotating"
-            "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
+          : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
-            className
+      </Badge>
-          )}
-        >
-          <FontAwesomeIcon icon={faRotate} />
-          {daysToRotation < 0
-            ? "Rotating"
-            : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
-        </Badge>
-      </div>
     </Tooltip>
   );
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx

@@ -1,8 +1,10 @@
 import { ReactNode } from "react";
-import { faArrowRight, faKey } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { KeyIcon } from "lucide-react";
 
-import { Badge, FormLabel } from "@app/components/v2";
+import { FormLabel } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 
 type Props = {
   items: { name: string; input: ReactNode }[];
@@ -32,9 +34,10 @@ export const SecretsMappingTable = ({ items }: Props) => {
             <tr key={name}>
               <td className="whitespace-nowrap">
                 <div className="mb-4 flex h-full items-start justify-center">
-                  <Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 border border-mineshaft-600 bg-mineshaft-600 whitespace-nowrap text-bunker-200">
+                  {/* TODO(scott): probably shouldn't be a badge */}
-                    <FontAwesomeIcon icon={faKey} />
+                  <Badge variant="neutral" className="h-[36px] w-full justify-center text-xs">
-                    <span>{name}</span>
+                    <KeyIcon />
+                    {name}
                   </Badge>
                 </div>
               </td>

frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 
 import { TSecretScanningDataSourceForm } from "@app/components/secret-scanning/forms/schemas";
 import { Modal, ModalContent } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   SecretScanningDataSource,
   TSecretScanningDataSource
@@ -108,23 +107,9 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
           selectedDataSource ? (
             <SecretScanningDataSourceModalHeader isConfigured={false} type={selectedDataSource} />
           ) : (
-            <div className="flex items-center text-mineshaft-300">
+            <div className="flex items-center gap-x-2 text-mineshaft-300">
               Add Data Source
-              <a
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/secret-scanning/overview" />
-                target="_blank"
-                href="https://infisical.com/docs/documentation/platform/secret-scanning/overview"
-                className="mb-1 ml-1"
-                rel="noopener noreferrer"
-              >
-                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1 text-[10px]"
-                  />
-                </div>
-              </a>
             </div>
           )
         }

frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { DocumentationLinkBadge } from "@app/components/v3";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { SECRET_SCANNING_DATA_SOURCE_MAP } from "@app/helpers/secretScanningV2";
 import { SecretScanningDataSource } from "@app/hooks/api/secretScanningV2";
 
@@ -20,23 +18,11 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
         className="h-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {dataSourceDetails.name} Data Source
-          <a
+          <DocumentationLinkBadge
-            target="_blank"
             href={`https://infisical.com/docs/documentation/platform/secret-scanning/${type}`}
-            className="mb-1 ml-1"
+          />
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured ? "Edit" : "Connect a"} {dataSourceDetails.name} Data Source

frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx

@@ -1,22 +1,23 @@
-import { faArrowRotateForward, faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatDistance } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { CheckIcon, RotateCwIcon, XIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
+import { Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { SecretScanningScanStatus } from "@app/hooks/api/secretScanningV2";
 
 type Props = {
   status: SecretScanningScanStatus;
   statusMessage?: string | null;
-  className?: string;
+
   scannedAt?: string | null;
 };
 
 export const SecretScanningScanStatusBadge = ({
   status,
   statusMessage,
-  className,
+
   scannedAt
 }: Props) => {
   if (status === SecretScanningScanStatus.Failed) {
@@ -53,11 +54,8 @@ export const SecretScanningScanStatusBadge = ({
         }
       >
         <div>
-          <Badge
+          <Badge variant="danger">
-            variant="danger"
+            <XIcon />
-            className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          >
-            <FontAwesomeIcon icon={faXmark} />
             Scan Error
           </Badge>
         </div>
@@ -67,26 +65,17 @@ export const SecretScanningScanStatusBadge = ({
 
   if (status === SecretScanningScanStatus.Queued || status === SecretScanningScanStatus.Scanning) {
     return (
-      <Badge
+      <Badge variant="info">
-        className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
+        <RotateCwIcon className="animate-spin" />
-        variant="primary"
+        Scanning
-      >
-        <FontAwesomeIcon icon={faArrowRotateForward} className="animate-spin" />
-        <span>Scanning</span>
       </Badge>
     );
   }
 
   return (
-    <Badge
+    <Badge variant="success">
-      variant="success"
+      <CheckIcon />
-      className={twMerge(
+      Complete
-        "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
-        className
-      )}
-    >
-      <FontAwesomeIcon icon={faCheck} />
-      <span>Complete</span>
     </Badge>
   );
 };

frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
-  faCheck,
-  faDownload,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { differenceInSeconds } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { AlertTriangleIcon, CheckIcon, DownloadIcon, LucideIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
+import { Tooltip } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs";
 
 type Props = {
   secretSync: TSecretSync;
-  className?: string;
   mini?: boolean;
 };
 
-export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Props) => {
+export const SecretSyncImportStatusBadge = ({ secretSync, mini }: Props) => {
   const { importStatus, lastImportMessage, lastImportedAt, destination } = secretSync;
   const [hide, setHide] = useState(importStatus === SecretSyncStatus.Succeeded);
   const destinationName = SECRET_SYNC_MAP[destination].name;
@@ -50,24 +43,24 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
 
   if (!importStatus || hide) return null;
 
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let label: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
   let tooltipContent: ReactNode;
 
   switch (importStatus) {
     case SecretSyncStatus.Pending:
     case SecretSyncStatus.Running:
-      variant = "primary";
+      variant = "warning";
       label = "Importing Secrets...";
       tooltipContent = `Importing secrets from ${destinationName}. This may take a moment.`;
-      icon = faDownload;
+      Icon = DownloadIcon;
 
       break;
     case SecretSyncStatus.Failed:
       variant = "danger";
       label = "Failed to Import Secrets";
-      icon = faTriangleExclamation;
+      Icon = AlertTriangleIcon;
       tooltipContent = (
         <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
@@ -93,20 +86,15 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
       tooltipContent = "Successfully imported secrets.";
       variant = "success";
       label = "Secrets Imported";
-      icon = faCheck;
+      Icon = CheckIcon;
   }
 
   return (
     <Tooltip position="bottom" className="max-w-sm" content={tooltipContent}>
-      <div>
+      <Badge isSquare={mini} variant={variant}>
-        <Badge
+        <Icon />
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
+        {!mini && label}
-          variant={variant}
+      </Badge>
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
     </Tooltip>
   );
 };

frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { DocumentationLinkBadge } from "@app/components/v3";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -20,23 +18,11 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
         className="h-12 w-12 rounded-md bg-bunker-500 object-contain p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {destinationDetails.name} Sync
-          <a
+          <DocumentationLinkBadge
-            target="_blank"
             href={`https://infisical.com/docs/integrations/secret-syncs/${destination}`}
-            className="mb-1 ml-1"
+          />
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured

frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
-  faCheck,
-  faEraser,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { differenceInSeconds } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { AlertTriangleIcon, CheckIcon, EraserIcon, LucideIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
+import { Tooltip } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs";
 
 type Props = {
   secretSync: TSecretSync;
-  className?: string;
   mini?: boolean;
 };
 
-export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Props) => {
+export const SecretSyncRemoveStatusBadge = ({ secretSync, mini }: Props) => {
   const { removeStatus, lastRemoveMessage, lastRemovedAt, destination } = secretSync;
   const [hide, setHide] = useState(removeStatus === SecretSyncStatus.Succeeded);
   const destinationName = SECRET_SYNC_MAP[destination].name;
@@ -50,24 +43,24 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
 
   if (!removeStatus || hide) return null;
 
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let label: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
   let tooltipContent: ReactNode;
 
   switch (removeStatus) {
     case SecretSyncStatus.Pending:
     case SecretSyncStatus.Running:
-      variant = "primary";
+      variant = "warning";
       label = "Removing Secrets...";
       tooltipContent = `Removing secrets from ${destinationName}. This may take a moment.`;
-      icon = faEraser;
+      Icon = EraserIcon;
 
       break;
     case SecretSyncStatus.Failed:
       variant = "danger";
       label = "Failed to Remove Secrets";
-      icon = faTriangleExclamation;
+      Icon = AlertTriangleIcon;
       tooltipContent = (
         <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
@@ -93,20 +86,15 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
       tooltipContent = "Successfully removed secrets.";
       variant = "success";
       label = "Secrets Removed";
-      icon = faCheck;
+      Icon = CheckIcon;
   }
 
   return (
     <Tooltip position="bottom" className="max-w-sm" content={tooltipContent}>
-      <div>
+      <Badge isSquare={mini} variant={variant}>
-        <Badge
+        <Icon />
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
+        {!mini && label}
-          variant={variant}
+      </Badge>
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
     </Tooltip>
   );
 };

frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx

@@ -1,55 +1,51 @@
 import {
-  faCheck,
+  AlertTriangleIcon,
-  faExclamationTriangle,
+  CheckIcon,
-  faHourglass,
+  HourglassIcon,
-  faRotate,
+  LucideIcon,
-  IconDefinition
+  RefreshCwIcon
-} from "@fortawesome/free-solid-svg-icons";
+} from "lucide-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Badge, BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { SecretSyncStatus } from "@app/hooks/api/secretSyncs";
 
 type Props = {
   status: SecretSyncStatus;
-} & Omit<BadgeProps, "children" | "variant">;
+} & Omit<TBadgeProps, "children" | "variant">;
 
 export const SecretSyncStatusBadge = ({ status }: Props) => {
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let text: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
 
   switch (status) {
     case SecretSyncStatus.Failed:
       variant = "danger";
       text = "Failed to Sync";
-      icon = faExclamationTriangle;
+      Icon = AlertTriangleIcon;
       break;
     case SecretSyncStatus.Succeeded:
       variant = "success";
       text = "Synced";
-      icon = faCheck;
+      Icon = CheckIcon;
       break;
     case SecretSyncStatus.Pending:
-      variant = "primary";
+      variant = "info";
       text = "Queued";
-      icon = faHourglass;
+      Icon = HourglassIcon;
       break;
     case SecretSyncStatus.Running:
     default:
-      variant = "primary";
+      variant = "info";
       text = "Syncing";
-      icon = faRotate;
+      Icon = RefreshCwIcon;
       break;
   }
 
   return (
-    <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
+    <Badge variant={variant}>
-      <FontAwesomeIcon
+      <Icon className={[SecretSyncStatus.Running].includes(status) ? "animate-spin" : ""} />
-        icon={icon}
+      {text}
-        className={[SecretSyncStatus.Running].includes(status) ? "animate-spin" : ""}
-      />
-      <span>{text}</span>
     </Badge>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx

@@ -5,14 +5,8 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
-import {
+import { FilterableSelect, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
-  Badge,
+import { Badge } from "@app/components/v3";
-  FilterableSelect,
-  FormControl,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
 import { GCP_SYNC_SCOPES } from "@app/helpers/secretSyncs";
 import {
   useGcpConnectionListProjectLocations,
@@ -26,10 +20,7 @@ import { TSecretSyncForm } from "../schemas";
 
 const formatOptionLabel = ({ displayName, locationId }: TGcpLocation) => (
   <div className="flex w-full flex-row items-center gap-1">
-    <span>{displayName}</span>{" "}
+    <span>{displayName}</span> <Badge variant="info">{locationId}</Badge>
-    <Badge className="h-5 leading-5" variant="success">
-      {locationId}
-    </Badge>
   </div>
 );
 

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx

@@ -2,7 +2,8 @@ import { components, OptionProps, SingleValue } from "react-select";
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Badge, FilterableSelect } from "@app/components/v2";
+import { FilterableSelect } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 
 const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGIONS)[number]>) => {
@@ -10,7 +11,7 @@ const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGI
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
         <p className="truncate">{children}</p>
-        <Badge variant="success" className="mr-auto ml-1 cursor-pointer">
+        <Badge variant="neutral" className="mr-auto ml-1">
           {props.data.slug}
         </Badge>
         {isSelected && (

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx

@@ -1,10 +1,10 @@
 import { useFormContext } from "react-hook-form";
-import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { EyeIcon } from "lucide-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -41,11 +41,9 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge variant="neutral">
-                <FontAwesomeIcon icon={faEye} />
+                <EyeIcon />
-                <span>
+                {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                  {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                </span>
               </Badge>
             </div>
           </Tooltip>

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx

@@ -1,10 +1,10 @@
 import { useFormContext } from "react-hook-form";
-import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { EyeIcon } from "lucide-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { AwsSecretsManagerSyncMappingBehavior } from "@app/hooks/api/secretSyncs/types/aws-secrets-manager-sync";
@@ -26,7 +26,7 @@ export const AwsSecretsManagerSyncReviewFields = () => {
     <>
       <GenericFieldLabel label="Region">
         {awsRegion?.name}
-        <Badge className="ml-1" variant="success">
+        <Badge className="ml-1" variant="info">
           {awsRegion?.slug}{" "}
         </Badge>
       </GenericFieldLabel>
@@ -73,11 +73,9 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge variant="neutral">
-                <FontAwesomeIcon icon={faEye} />
+                <EyeIcon />
-                <span>
+                {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                  {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                </span>
               </Badge>
             </div>
           </Tooltip>

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/RenderSyncReviewFields.tsx

@@ -2,7 +2,7 @@ import { useFormContext } from "react-hook-form";
 
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { RenderSyncScope } from "@app/hooks/api/secretSyncs/types/render-sync";
 

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useOrganization, useProject } from "@app/context";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSync, useDuplicateDestinationCheck } from "@app/hooks/api/secretSyncs";
@@ -257,7 +257,7 @@ export const SecretSyncReviewFields = () => {
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Auto-Sync">
-            <Badge variant={isAutoSyncEnabled ? "success" : "danger"}>
+            <Badge variant={isAutoSyncEnabled ? "success" : "neutral"}>
               {isAutoSyncEnabled ? "Enabled" : "Disabled"}
             </Badge>
           </GenericFieldLabel>
@@ -268,7 +268,7 @@ export const SecretSyncReviewFields = () => {
           {AdditionalSyncOptionsFieldsComponent}
           {disableSecretDeletion && (
             <GenericFieldLabel label="Secret Deletion">
-              <Badge variant="primary">Disabled</Badge>
+              <Badge variant="warning">Disabled</Badge>
             </GenericFieldLabel>
           )}
         </div>

frontend/src/components/v2/Badge/Badge.tsx

@@ -1,47 +0,0 @@
-import { forwardRef } from "react";
-import { cva, VariantProps } from "cva";
-import { twMerge } from "tailwind-merge";
-
-interface IProps {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-}
-
-const badgeVariants = cva(
-  [
-    "inline-block cursor-default rounded-md bg-yellow/20 px-1.5 py-0.5 text-xs text-yellow opacity-80 hover:opacity-100"
-  ],
-  {
-    variants: {
-      variant: {
-        primary: "bg-yellow/20 text-yellow",
-        danger: "bg-red/20 text-red",
-        success: "bg-green/20 text-green",
-        org: "bg-org-v1/20 text-org-v1 [&_svg]:text-org-v1 flex items-center opacity-100 hover:bg-org-v1/10 [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap",
-        namespace:
-          "bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1.5 w-min whitespace-nowrap",
-        project:
-          "bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 w-min gap-x-1.5 whitespace-nowrap",
-        instance:
-          "bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1.5 w-min whitespace-nowrap"
-      }
-    }
-  }
-);
-
-export type BadgeProps = VariantProps<typeof badgeVariants> & IProps;
-
-export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
-  ({ children, className, variant, ...props }, ref) => {
-    return (
-      <div
-        className={twMerge(badgeVariants({ variant: variant || "primary" }), className)}
-        {...props}
-        ref={ref}
-      >
-        {children}
-      </div>
-    );
-  }
-);

frontend/src/components/v2/Badge/index.tsx

@@ -1 +0,0 @@
-export { Badge } from "./Badge";

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -1,11 +1,16 @@
-import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { createElement } from "react";
-import { faCube, faCubes, faGlobe, faServer } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ReactNode } from "@tanstack/react-router";
+import { LucideIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
-import { Badge } from "@app/components/v2";
+import {
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+  Badge,
+  InstanceIcon,
+  OrgIcon,
+  ProjectIcon,
+  SubOrgIcon,
+  TBadgeProps
+} from "@app/components/v3";
 import { ProjectType } from "@app/hooks/api/projects/types";
 
 type Props = {
@@ -16,19 +21,19 @@ type Props = {
   scope: "org" | "namespace" | "instance" | ProjectType | null;
 };
 
-const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: IconDefinition }> = {
+const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: LucideIcon }> = {
-  org: { label: "Organization", icon: faGlobe },
+  org: { label: "Organization", icon: OrgIcon },
-  [ProjectType.SecretManager]: { label: "Project", icon: faCube },
+  [ProjectType.SecretManager]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.CertificateManager]: { label: "Project", icon: faCube },
+  [ProjectType.CertificateManager]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.SSH]: { label: "Project", icon: faCube },
+  [ProjectType.SSH]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.KMS]: { label: "Project", icon: faCube },
+  [ProjectType.KMS]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.PAM]: { label: "Project", icon: faCube },
+  [ProjectType.PAM]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.SecretScanning]: { label: "Project", icon: faCube },
+  [ProjectType.SecretScanning]: { label: "Project", icon: ProjectIcon },
-  namespace: { label: "Sub-Organization", icon: faCubes },
+  namespace: { label: "Sub-Organization", icon: SubOrgIcon },
-  instance: { label: "Server", icon: faServer }
+  instance: { label: "Server", icon: InstanceIcon }
 };
 
-const SCOPE_VARIANT: Record<NonNullable<Props["scope"]>, BadgeProps["variant"]> = {
+const SCOPE_VARIANT: Record<NonNullable<Props["scope"]>, TBadgeProps["variant"]> = {
   org: "org",
   [ProjectType.SecretManager]: "project",
   [ProjectType.CertificateManager]: "project",
@@ -36,8 +41,8 @@ const SCOPE_VARIANT: Record<NonNullable<Props["scope"]>, BadgeProps["variant"]>
   [ProjectType.KMS]: "project",
   [ProjectType.PAM]: "project",
   [ProjectType.SecretScanning]: "project",
-  namespace: "namespace",
+  namespace: "sub-org",
-  instance: "instance"
+  instance: "neutral"
 };
 
 export const PageHeader = ({ title, description, children, className, scope }: Props) => (
@@ -47,7 +52,7 @@ export const PageHeader = ({ title, description, children, className, scope }: P
         <h1 className="text-3xl font-medium text-white capitalize">{title}</h1>
         {scope && (
           <Badge variant={SCOPE_VARIANT[scope]} className="mt-1 ml-2.5">
-            <FontAwesomeIcon icon={SCOPE_NAME[scope].icon} />
+            {createElement(SCOPE_NAME[scope].icon)}
             {SCOPE_NAME[scope].label}
           </Badge>
         )}

frontend/src/components/v2/Select/Select.tsx

@@ -3,6 +3,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown, faCaretUp, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { LucideIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { Spinner } from "../Spinner";
@@ -19,6 +20,7 @@ type Props = {
   icon?: IconProp;
   isMulti?: boolean;
   iconClassName?: string;
+  LucideIcon?: LucideIcon;
   dropdownContainerStyle?: React.CSSProperties;
   side?: SelectPrimitive.SelectContentProps["side"];
 };
@@ -39,6 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       iconClassName,
       dropdownContainerStyle,
       side,
+      LucideIcon: Lucide,
       ...props
     },
     ref
@@ -65,6 +68,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           >
             <div className="flex items-center space-x-2 overflow-hidden text-ellipsis whitespace-nowrap">
               {props.icon && <FontAwesomeIcon icon={props.icon} className={iconClassName} />}
+              {Lucide && <Lucide className={twMerge("size-3.5", iconClassName)} />}
               <div className="flex-1 truncate">
                 <SelectPrimitive.Value placeholder={placeholder} />
               </div>

frontend/src/components/v2/index.tsx

@@ -2,7 +2,6 @@
 export * from "./AccessRestrictedBanner";
 export * from "./Accordion";
 export * from "./Alert";
-export * from "./Badge";
 export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./Card";

frontend/src/components/v3/generic/Badge/Badge.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Link } from "@tanstack/react-router";
 import {
+  AlertTriangleIcon,
+  AsteriskIcon,
   BanIcon,
-  BoxesIcon,
-  BoxIcon,
   CheckIcon,
   ChevronsUpDownIcon,
   CircleXIcon,
@@ -11,9 +11,11 @@ import {
   GlobeIcon,
   InfoIcon,
   RadarIcon,
-  TriangleAlertIcon
+  TriangleAlertIcon,
+  UserIcon
 } from "lucide-react";
 
+import { OrgIcon, ProjectIcon, SubOrgIcon } from "../../platform";
 import { Badge } from "./Badge";
 
 /**
@@ -69,7 +71,29 @@ export const Neutral: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Use this variant when indicating neutral or disabled states."
+        story:
+          "Use this variant when indicating neutral or disabled states or when linking to external documents."
+      }
+    }
+  }
+};
+
+export const Ghost: Story = {
+  name: "Variant: Ghost",
+  args: {
+    variant: "ghost",
+    children: (
+      <>
+        <UserIcon />
+        User
+      </>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use this variant when indicating a configuration or property value. Avoid using this variant as an interactive element as it is not intuitive to interact with."
       }
     }
   }
@@ -109,8 +133,7 @@ export const Info: Story = {
   parameters: {
     docs: {
       description: {
-        story:
+        story: "Use this variant when indicating informational states."
-          "Use this variant when indicating informational states or linking to external references."
       }
     }
   }
@@ -162,7 +185,7 @@ export const Organization: Story = {
     variant: "org",
     children: (
       <>
-        <GlobeIcon />
+        <OrgIcon />
         Organization
       </>
     )
@@ -182,7 +205,7 @@ export const SubOrganization: Story = {
     variant: "sub-org",
     children: (
       <>
-        <BoxesIcon />
+        <SubOrgIcon />
         Sub-Organization
       </>
     )
@@ -202,7 +225,7 @@ export const Project: Story = {
     variant: "project",
     children: (
       <>
-        <BoxIcon />
+        <ProjectIcon />
         Project
       </>
     )
@@ -283,10 +306,11 @@ export const AsButton: Story = {
 export const IsTruncatable: Story = {
   name: "Example: isTruncatable",
   args: {
+    variant: "org",
     isTruncatable: true,
     children: (
       <>
-        <GlobeIcon />
+        <OrgIcon />
         <span>Infisical Infrastructure</span>
       </>
     )
@@ -295,7 +319,7 @@ export const IsTruncatable: Story = {
     docs: {
       description: {
         story:
-          "Use the `isTruncatable` prop with a `span` tag wrapping the text content to support truncation."
+          "Use the `isTruncatable` prop with a `span` tag wrapping the text content to support truncation. Parent `div` should have a fixed width and `flex` class."
       }
     }
   },
@@ -305,3 +329,48 @@ export const IsTruncatable: Story = {
     </div>
   )
 };
+
+export const IsSquare: Story = {
+  name: "Example: isSquare",
+  args: {
+    variant: "danger",
+    isSquare: true,
+    children: <AlertTriangleIcon />
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the `isSquare` prop when displaying a squared badge with 1-2 character text or only an icon."
+      }
+    }
+  }
+};
+
+export const IsFullWidth: Story = {
+  name: "Example: isFullWidth",
+  args: {
+    variant: "neutral",
+    isFullWidth: true,
+
+    children: (
+      <>
+        <AsteriskIcon />
+        Secret Value
+      </>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the `isFullWidth` prop to expand the badges width to fill it's parent container."
+      }
+    }
+  },
+  decorators: (Story) => (
+    <div className="w-32">
+      <Story />
+    </div>
+  )
+};

frontend/src/components/v3/generic/Badge/Badge.tsx

@@ -6,30 +6,37 @@ import { cn } from "@app/components/v3/utils";
 
 const badgeVariants = cva(
   [
-    "select-none items-center rounded-sm px-1.5 py-0.5 text-xs",
+    "select-none items-center align-middle rounded-sm h-4.5 px-1.5 text-xs",
-    "gap-x-1 [a&,button&]:cursor-pointer inline-flex",
+    "gap-x-1 [a&,button&]:cursor-pointer inline-flex font-normal",
-    "[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&>svg]:size-3",
+    "[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&_svg:not([class*='size-'])]:size-3",
     "transition duration-200 ease-in-out"
   ],
   {
     variants: {
       isTruncatable: {
         true: "[&>span,&>p]:truncate min-w-0",
-        false: "w-fit shrink-0 whitespace-nowrap overflow-hidden"
+        false: "w-fit shrink-0 min-w-fit whitespace-nowrap overflow-hidden"
+      },
+      isFullWidth: {
+        true: "w-full justify-center"
+      },
+      isSquare: {
+        true: "w-4.5 justify-center px-0.5"
       },
       variant: {
-        neutral: "bg-neutral/30 text-neutral [a&,button&]:hover:bg-neutral/40",
+        ghost: "text-mineshaft-200 gap-x-2",
-        success: "bg-success/30 text-success [a&,button&]:hover:bg-success/40",
+        neutral: "bg-neutral/25 text-neutral [a&,button&]:hover:bg-neutral/35",
-        info: "bg-info/30 text-info [a&,button&]:hover:bg-info/40",
+        success: "bg-success/25 text-success [a&,button&]:hover:bg-success/35",
-        warning: "bg-warning/30 text-warning [a&,button&]:hover:bg-warning/40",
+        info: "bg-info/25 text-info [a&,button&]:hover:bg-info/35",
-        danger: "bg-danger/30 text-danger [a&,button&]:hover:bg-danger/40",
+        warning: "bg-warning/25 text-warning [a&,button&]:hover:bg-warning/35",
-        project: "bg-project/30 text-project [a&,button&]:hover:bg-project/40",
+        danger: "bg-danger/25 text-danger [a&,button&]:hover:bg-danger/35",
-        org: "bg-org/30 text-org [a&,button&]:hover:bg-org/40",
+        project: "bg-project/25 text-project [a&,button&]:hover:bg-project/35",
-        "sub-org": "bg-sub-org/30 text-sub-org [a&,button&]:hover:bg-sub-org/40"
+        org: "bg-org/25 text-org [a&,button&]:hover:bg-org/35",
+        "sub-org": "bg-sub-org/25 text-sub-org [a&,button&]:hover:bg-sub-org/35"
       }
     },
     defaultVariants: {
-      variant: "success"
+      variant: "neutral"
     }
   }
 );
@@ -37,16 +44,28 @@ const badgeVariants = cva(
 type TBadgeProps = VariantProps<typeof badgeVariants> &
   React.ComponentProps<"span"> & {
     asChild?: boolean;
+    variant: NonNullable<VariantProps<typeof badgeVariants>["variant"]>; // TODO: REMOVE
   };
 
 const Badge = forwardRef<HTMLSpanElement, TBadgeProps>(
-  ({ className, variant, asChild = false, isTruncatable = false, ...props }, ref): JSX.Element => {
+  (
+    {
+      className,
+      variant,
+      asChild = false,
+      isTruncatable = false,
+      isFullWidth = false,
+      isSquare = false,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
     const Comp = asChild ? Slot : "span";
     return (
       <Comp
         ref={ref}
         data-slot="badge"
-        className={cn(badgeVariants({ variant, isTruncatable }), className)}
+        className={cn(badgeVariants({ variant, isTruncatable, isFullWidth, isSquare }), className)}
         {...props}
       />
     );

frontend/src/components/v3/index.ts

@@ -0,0 +1,2 @@
+export * from "./generic";
+export * from "./platform";

frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { DocumentationLinkBadge } from "./DocumentationLinkBadge";
+
+/**
+ * The documentation link badge is a re-usable component to link to Infisical documentation references.
+ */
+const meta = {
+  title: "Platform/Documentation Link Badge",
+  component: DocumentationLinkBadge,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+  args: { href: "https://infisical.com/docs/documentation/getting-started/introduction" }
+} satisfies Meta<typeof DocumentationLinkBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Example: Default"
+};

frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.tsx

@@ -0,0 +1,18 @@
+import { BookOpenIcon } from "lucide-react";
+
+import { Badge } from "@app/components/v3";
+
+type TDocumentationLinkBadgeProps = {
+  href: string;
+};
+
+export function DocumentationLinkBadge({ href }: TDocumentationLinkBadgeProps) {
+  return (
+    <Badge variant="neutral" asChild>
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        <BookOpenIcon />
+        Documentation
+      </a>
+    </Badge>
+  );
+}

frontend/src/components/v3/platform/DocumentationLinkBadge/index.ts

@@ -0,0 +1 @@
+export * from "./DocumentationLinkBadge";

frontend/src/components/v3/platform/ScopeIcons.tsx

@@ -0,0 +1,8 @@
+import { BoxesIcon, BoxIcon, Building2Icon, ServerIcon } from "lucide-react";
+
+const InstanceIcon = ServerIcon;
+const OrgIcon = Building2Icon;
+const SubOrgIcon = BoxesIcon;
+const ProjectIcon = BoxIcon;
+
+export { InstanceIcon, OrgIcon, ProjectIcon, SubOrgIcon };

frontend/src/components/v3/platform/index.ts

@@ -0,0 +1,2 @@
+export * from "./DocumentationLinkBadge";
+export * from "./ScopeIcons";

frontend/src/helpers/policies.ts

@@ -1,20 +1,20 @@
-import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { LucideIcon, UserCheckIcon, UserPenIcon } from "lucide-react";
-import { faArrowRightToBracket, faEdit } from "@fortawesome/free-solid-svg-icons";
 
+import { TBadgeProps } from "@app/components/v3";
 import { PolicyType } from "@app/hooks/api/policies/enums";
 
 export const policyDetails: Record<
   PolicyType,
-  { name: string; className: string; icon: IconDefinition }
+  { name: string; variant: TBadgeProps["variant"]; Icon: LucideIcon }
 > = {
   [PolicyType.AccessPolicy]: {
-    className: "bg-green/20 text-green",
+    variant: "ghost",
     name: "Access Policy",
-    icon: faArrowRightToBracket
+    Icon: UserCheckIcon
   },
   [PolicyType.ChangePolicy]: {
-    className: "bg-yellow/20 text-yellow",
+    variant: "ghost",
     name: "Change Policy",
-    icon: faEdit
+    Icon: UserPenIcon
   }
 };

frontend/src/helpers/secretScanningV2.ts

@@ -1,10 +1,6 @@
-import {
+import { AlertTriangleIcon, BanIcon, CheckIcon, LucideIcon, SearchSlashIcon } from "lucide-react";
-  faBan,
-  faCheck,
-  faMagnifyingGlassMinus,
-  faWarning
-} from "@fortawesome/free-solid-svg-icons";
 
+import { TBadgeProps } from "@app/components/v3";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import {
   SecretScanningDataSource,
@@ -74,12 +70,28 @@ export const RESOURCE_DESCRIPTION_HELPER: Record<
   }
 };
 
-export const SECRET_SCANNING_FINDING_STATUS_ICON_MAP = {
+export const SECRET_SCANNING_FINDING_STATUS_MAP: Record<
-  [SecretScanningFindingStatus.Resolved]: { icon: faCheck, className: "text-green" },
+  SecretScanningFindingStatus,
-  [SecretScanningFindingStatus.Unresolved]: { icon: faWarning, className: "text-yellow" },
+  { Icon: LucideIcon; variant: TBadgeProps["variant"]; className: string }
-  [SecretScanningFindingStatus.Ignore]: { icon: faBan, className: "text-mineshaft-400" },
+> = {
+  [SecretScanningFindingStatus.Resolved]: {
+    Icon: CheckIcon,
+    variant: "success",
+    className: "text-success"
+  },
+  [SecretScanningFindingStatus.Unresolved]: {
+    Icon: AlertTriangleIcon,
+    variant: "warning",
+    className: "text-warning"
+  },
+  [SecretScanningFindingStatus.Ignore]: {
+    Icon: BanIcon,
+    variant: "neutral",
+    className: "text-neutral"
+  },
   [SecretScanningFindingStatus.FalsePositive]: {
-    icon: faMagnifyingGlassMinus,
+    Icon: SearchSlashIcon,
-    className: "text-mineshaft-400"
+    variant: "neutral",
+    className: "text-neutral"
   }
 };

frontend/src/hooks/api/ca/constants.tsx

@@ -53,6 +53,6 @@ export const getCaStatusBadgeVariant = (status: CaStatus | SshCaStatus | SshCert
     case CaStatus.DISABLED:
       return "danger";
     default:
-      return "primary";
+      return "warning";
   }
 };

frontend/src/hooks/api/pam/types/index.ts

@@ -1,9 +1,9 @@
 import { PamResourceType, PamSessionStatus } from "../enums";
-import { TPostgresAccount, TPostgresResource } from "./postgres-resource";
 import { TMySQLAccount, TMySQLResource } from "./mysql-resource";
+import { TPostgresAccount, TPostgresResource } from "./postgres-resource";
 
-export * from "./postgres-resource";
 export * from "./mysql-resource";
+export * from "./postgres-resource";
 
 export type TPamResource = TPostgresResource | TMySQLResource;
 

frontend/src/hooks/api/pkiSubscriber/constants.tsx

@@ -15,6 +15,6 @@ export const getPkiSubscriberStatusBadgeVariant = (status: PkiSubscriberStatus)
     case PkiSubscriberStatus.DISABLED:
       return "danger";
     default:
-      return "primary";
+      return "warning";
   }
 };

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -7,15 +7,12 @@ import {
   faCaretDown,
   faCheck,
   faChevronRight,
-  faCubes,
   faEnvelope,
   faExclamationTriangle,
-  faGlobe,
   faInfinity,
   faInfo,
   faInfoCircle,
   faPlus,
-  faServer,
   faSignOut,
   faToolbox,
   faUser,
@@ -30,7 +27,6 @@ import { Mfa } from "@app/components/auth/Mfa";
 import { createNotification } from "@app/components/notifications";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import {
-  Badge,
   BreadcrumbContainer,
   Button,
   DropdownMenu,
@@ -46,6 +42,7 @@ import {
   TBreadcrumbFormat,
   Tooltip
 } from "@app/components/v2";
+import { Badge, InstanceIcon, OrgIcon, SubOrgIcon } from "@app/components/v3";
 import { envConfig } from "@app/config/env";
 import { useOrganization, useSubscription, useUser } from "@app/context";
 import { isInfisicalCloud } from "@app/helpers/platform";
@@ -271,9 +268,7 @@ export const Navbar = () => {
               to="/admin"
               className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary"
             >
-              <div>
+              <InstanceIcon className="size-3.5 text-xs text-bunker-300" />
-                <FontAwesomeIcon icon={faServer} className="text-xs text-bunker-300" />
-              </div>
               <div className="whitespace-nowrap">Server Console</div>
             </Link>
             <p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p>
@@ -288,24 +283,31 @@ export const Navbar = () => {
               <DropdownMenu modal={false} open={isOrgSelectOpen} onOpenChange={setIsOrgSelectOpen}>
                 <div className="group flex cursor-pointer items-center gap-2 overflow-hidden text-sm text-white transition-all duration-100 hover:text-primary">
                   <Badge
-                    onClick={async () => {
+                    asChild
-                      navigate({
-                        to: "/organization/projects",
-                        search: (search) => ({ ...search, subOrganization: undefined })
-                      });
-                      if (isSubOrganization) {
-                        await router.invalidate({ sync: true }).catch(() => null);
-                      }
-                    }}
                     variant="org"
+                    isTruncatable
+                    // TODO(scott): either add badge size/style variant or create designated component for namespace/org nav bar
                     className={twMerge(
-                      "max-w-full min-w-0 cursor-pointer text-sm",
+                      "gap-x-1.5 text-sm",
                       (!isOrgScope || isSubOrganization) &&
-                        "bg-transparent text-mineshaft-200 hover:bg-transparent hover:underline"
+                        "bg-transparent text-mineshaft-200 hover:!bg-transparent hover:underline [&>svg]:!text-org"
                     )}
                   >
-                    <FontAwesomeIcon icon={faGlobe} />
+                    <button
-                    <p className="truncate">{currentOrg?.name}</p>
+                      type="button"
+                      onClick={async () => {
+                        navigate({
+                          to: "/organization/projects",
+                          search: (search) => ({ ...search, subOrganization: undefined })
+                        });
+                        if (isSubOrganization) {
+                          await router.invalidate({ sync: true }).catch(() => null);
+                        }
+                      }}
+                    >
+                      <OrgIcon className="size-[12px]" />
+                      <span>{currentOrg?.name}</span>
+                    </button>
                   </Badge>
                   <div className="mr-1 rounded-sm border border-mineshaft-500 px-1 text-xs text-bunker-300 no-underline!">
                     {getPlan(subscription)}
@@ -443,19 +445,22 @@ export const Navbar = () => {
               <>
                 <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
                 <DropdownMenu modal={false}>
-                  <Link className="overflow-hidden" to="/organization/projects">
+                  <Badge
-                    <Badge
+                    asChild
-                      variant="namespace"
+                    isTruncatable
-                      className={twMerge(
+                    variant="sub-org"
-                        "flex max-w-full min-w-0 cursor-pointer text-sm",
+                    // TODO(scott): either add badge size/style variant or create designated component for namespace/org nav bar
-                        !isOrgScope &&
+                    className={twMerge(
-                          "bg-transparent text-mineshaft-200 hover:bg-transparent hover:underline"
+                      "gap-x-1.5 text-sm",
-                      )}
+                      !isOrgScope &&
-                    >
+                        "bg-transparent text-mineshaft-200 hover:!bg-transparent hover:underline [&>svg]:!text-sub-org"
-                      <FontAwesomeIcon icon={faCubes} />
+                    )}
-                      <p className="truncate">{currentOrg.subOrganization.name}</p>
+                  >
-                    </Badge>
+                    <Link to="/organization/projects">
-                  </Link>
+                      <SubOrgIcon className="size-[12px]" />
+                      <span>{currentOrg.subOrganization.name}</span>
+                    </Link>
+                  </Badge>
                   <DropdownMenuTrigger asChild>
                     <div>
                       <IconButton
@@ -549,10 +554,10 @@ export const Navbar = () => {
       )}
       {user.superAdmin && !location.pathname.startsWith("/admin") && (
         <Link
-          className="mr-2 rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
+          className="mr-2 flex items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
           to="/admin"
         >
-          <FontAwesomeIcon icon={faServer} className="mr-2" />
+          <InstanceIcon className="mr-2 inline-block size-3.5" />
           Server Console
         </Link>
       )}

frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -3,7 +3,6 @@ import { faStar } from "@fortawesome/free-regular-svg-icons";
 import {
   faCaretDown,
   faCheck,
-  faCube,
   faMagnifyingGlass,
   faPlus,
   faStar as faSolidStar
@@ -16,7 +15,6 @@ import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { NewProjectModal } from "@app/components/projects";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -25,6 +23,7 @@ import {
   Input,
   Tooltip
 } from "@app/components/v2";
+import { Badge, ProjectIcon } from "@app/components/v3";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -120,11 +119,9 @@ export const ProjectSelect = () => {
           <p className="inline-block truncate text-mineshaft-200 group-hover:underline">
             {currentWorkspace?.name}
           </p>
-          <Badge variant="project" className="cursor-pointer">
+          <Badge variant="project">
-            <FontAwesomeIcon icon={faCube} />
+            <ProjectIcon />
-            <span>
+            {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
-              {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
-            </span>
           </Badge>
         </Link>
         <DropdownMenuTrigger asChild>

frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
-import { Badge, Tab, TabList, Tabs } from "@app/components/v2";
+import { Tab, TabList, Tabs } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useProject, useProjectPermission } from "@app/context";
 import {
   useGetAccessRequestsCount,
@@ -88,7 +89,7 @@ export const SecretManagerLayout = () => {
                         {Boolean(
                           secretApprovalReqCount?.open || accessApprovalRequestCount?.pendingCount
                         ) && (
-                          <Badge variant="primary" className="ml-1.5">
+                          <Badge variant="warning" isSquare className="ml-1.5">
                             {pendingRequestsCount}
                           </Badge>
                         )}

frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx

@@ -1,7 +1,8 @@
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
-import { Badge, Tab, TabList, Tabs } from "@app/components/v2";
+import { Tab, TabList, Tabs } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionSub,
   useProject,
@@ -66,7 +67,7 @@ export const SecretScanningLayout = () => {
                     <Tab value={isActive ? "selected" : ""}>
                       Findings
                       {Boolean(unresolvedFindings) && (
-                        <Badge variant="primary" className="ml-2 h-min">
+                        <Badge isSquare variant="warning" className="ml-2">
                           {unresolvedFindings}
                         </Badge>
                       )}

frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx

@@ -7,16 +7,15 @@ import {
   faTrash,
   faUsers,
   faUserXmark,
-  faWarning,
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AlertTriangleIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import {
-  Badge,
   Button,
   Checkbox,
   DeleteActionModal,
@@ -38,6 +37,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useSubscription, useUser } from "@app/context";
 import {
   getUserTablePreference,
@@ -451,7 +451,7 @@ export const ServerAdminsTable = () => {
                 const email = user.email ?? user.username;
                 return (
                   <li key={user.id}>
-                    <div className="flex items-center">
+                    <div className="flex items-center gap-x-1">
                       <p>
                         {user.firstName || user.lastName ? (
                           <>
@@ -464,15 +464,10 @@ export const ServerAdminsTable = () => {
                       </p>
                       {userId === user.id && (
                         <Tooltip content="Are you sure you want to remove yourself from this instance?">
-                          <div className="inline-block">
+                          <Badge variant="danger">
-                            <Badge
+                            <AlertTriangleIcon />
-                              variant="primary"
+                            Deleting Yourself
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                          </Badge>
-                            >
-                              <FontAwesomeIcon icon={faWarning} />
-                              <span>Deleting Yourself</span>
-                            </Badge>
-                          </div>
                         </Tooltip>
                       )}
                     </div>

frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { faRotate } from "@fortawesome/free-solid-svg-icons";
+import { RefreshCwIcon } from "lucide-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
-import { Badge, Button, DeleteActionModal } from "@app/components/v2";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useUser } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useInvalidateCache } from "@app/hooks/api";
@@ -62,11 +62,8 @@ export const CachingPageForm = () => {
           <div className="mb-2 flex items-center gap-3">
             <span className="text-xl font-medium text-mineshaft-100">Secrets Cache</span>
             {isInvalidating && (
-              <Badge
+              <Badge variant="danger">
-                variant="danger"
+                <RefreshCwIcon className="animate-spin" />
-                className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-              >
-                <FontAwesomeIcon icon={faRotate} className="animate-spin" />
                 Invalidating Cache
               </Badge>
             )}

frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx

@@ -1,13 +1,13 @@
 import { useCallback } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { InfoIcon } from "lucide-react";
 import { z } from "zod";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
-import { Badge, Button, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
+import { Button, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useServerConfig, useSubscription } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
@@ -133,12 +133,10 @@ export const EncryptionPageForm = () => {
 
           {config.fipsEnabled && (
             <Tooltip content="FIPS mode of operation is enabled for your instance. All cryptographic operations within the FIPS boundaries are validated to be FIPS compliant.">
-              <div>
+              <Badge variant="info">
-                <Badge className="flex items-center gap-2" variant="primary">
+                FIPS Mode: Enabled
-                  FIPS Mode: Enabled
+                <InfoIcon />
-                  <FontAwesomeIcon icon={faInfoCircle} />
+              </Badge>
-                </Badge>
-              </div>
             </Tooltip>
           )}
         </div>

frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx

@@ -1,8 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Control, Controller, useForm, useWatch } from "react-hook-form";
 import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
   faChevronRight,
   faExclamationTriangle,
   faMagnifyingGlass
@@ -14,6 +12,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, SecretInput, Tooltip } from "@app/components/v2";
 import { HighlightText } from "@app/components/v2/HighlightText";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { useGetEnvOverrides, useUpdateServerConfig } from "@app/hooks/api";
 
 type TForm = Record<string, string>;
@@ -213,22 +212,9 @@ export const EnvironmentPageForm = () => {
     >
       <div className="flex w-full flex-row items-center justify-between">
         <div>
-          <div className="flex items-start gap-1">
+          <div className="flex items-center gap-x-2">
             <p className="text-xl font-medium text-mineshaft-100">Overrides</p>
-            <a
+            <DocumentationLinkBadge href="https://infisical.com/docs/self-hosting/configuration/envars#environment-variable-overrides" />
-              href="https://infisical.com/docs/self-hosting/configuration/envars#environment-variable-overrides"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                <span>Docs</span>
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.07rem] ml-1.5 text-[10px]"
-                />
-              </div>
-            </a>
           </div>
           <p className="text-sm text-bunker-300">
             Override specific environment variables. After saving, it may take up to 5 minutes for

frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx

@@ -7,10 +7,10 @@ import {
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ServerCogIcon } from "lucide-react";
 
 import { createNotification } from "@app/components/notifications";
 import {
-  Badge,
   DeleteActionModal,
   DropdownMenu,
   DropdownMenuContent,
@@ -29,6 +29,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   getUserTablePreference,
   PreferenceKey,
@@ -110,7 +111,8 @@ const IdentityPanelTable = ({
                     <Td>
                       {name}
                       {isInstanceAdmin && (
-                        <Badge variant="primary" className="ml-2">
+                        <Badge variant="info" className="ml-2">
+                          <ServerCogIcon />
                           Server Admin
                         </Badge>
                       )}

frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx

@@ -3,7 +3,6 @@ import {
   faArrowDown,
   faArrowUp,
   faBuilding,
-  faCircleQuestion,
   faEllipsisV,
   faEnvelope,
   faEye,
@@ -19,11 +18,11 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
+import { CircleQuestionMarkIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import {
-  Badge,
   Button,
   DeleteActionModal,
   DropdownMenu,
@@ -46,6 +45,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useUser } from "@app/context";
 import { OrgMembershipRole } from "@app/helpers/roles";
 import {
@@ -295,15 +295,17 @@ const ViewMembersModalContent = ({
                         )}
                     </div>
                   </Td>
-                  <Td className="max-w-0">
+                  <Td>
-                    <Badge className="flex w-fit max-w-full items-center gap-x-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
+                    <div className="flex max-w-32">
-                      <p className="truncate capitalize">{member.role.replace("-", " ")}</p>
+                      <Tooltip
-                      {Boolean(member.roleId) && (
+                        content={member.roleId ? "This member has a custom role assigned." : ""}
-                        <Tooltip content="This member has a custom role assigned.">
+                      >
-                          <FontAwesomeIcon icon={faCircleQuestion} className="w-3" />
+                        <Badge isTruncatable variant="neutral">
-                        </Tooltip>
+                          <span className="capitalize">{member.role.replace("-", " ")}</span>
-                      )}
+                          {Boolean(member.roleId) && <CircleQuestionMarkIcon />}
-                    </Badge>
+                        </Badge>
+                      </Tooltip>
+                    </div>
                   </Td>
                   <Td>
                     <div className="flex justify-end">

frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx

@@ -9,16 +9,15 @@ import {
   faUsers,
   faUserShield,
   faUserXmark,
-  faWarning,
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AlertTriangleIcon, UserCogIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import {
-  Badge,
   Button,
   Checkbox,
   DeleteActionModal,
@@ -41,6 +40,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useSubscription, useUser } from "@app/context";
 import {
   getUserTablePreference,
@@ -218,7 +218,8 @@ const UserPanelTable = ({
                             {name ?? <span className="text-mineshaft-400">Not Set</span>}
                           </p>
                           {superAdmin && (
-                            <Badge variant="primary" className="ml-2 whitespace-nowrap">
+                            <Badge variant="info" className="ml-2">
+                              <UserCogIcon />
                               Server Admin
                             </Badge>
                           )}
@@ -548,7 +549,7 @@ export const UserIdentitiesTable = () => {
                 const email = user.email ?? user.username;
                 return (
                   <li key={user.id}>
-                    <div className="flex items-center">
+                    <div className="flex items-center gap-x-1">
                       <p>
                         {user.firstName || user.lastName ? (
                           <>
@@ -561,15 +562,10 @@ export const UserIdentitiesTable = () => {
                       </p>
                       {userId === user.id && (
                         <Tooltip content="Are you sure you want to remove yourself from this instance?">
-                          <div className="inline-block">
+                          <Badge variant="danger">
-                            <Badge
+                            <AlertTriangleIcon />
-                              variant="primary"
+                            Deleting Yourself
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                          </Badge>
-                            >
-                              <FontAwesomeIcon icon={faWarning} />
-                              <span>Deleting Yourself</span>
-                            </Badge>
-                          </div>
                         </Tooltip>
                       )}
                     </div>

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesTable.tsx

@@ -7,7 +7,6 @@ import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -22,6 +21,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useGetCaCerts } from "@app/hooks/api";
 
@@ -60,7 +60,7 @@ export const CaCertificatesTable = ({ caId }: Props) => {
                     <div className="flex items-center">
                       CA Certificate {caCert.version}
                       {isLastItem && (
-                        <Badge variant="success" className="ml-4">
+                        <Badge variant="info" className="ml-4">
                           Current
                         </Badge>
                       )}

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaTable.tsx

@@ -6,7 +6,6 @@ import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -22,6 +21,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
 import { CaStatus, CaType, useListCasByTypeAndProjectId } from "@app/hooks/api";
 import {

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/ExternalCaTable.tsx

@@ -10,7 +10,6 @@ import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -26,6 +25,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
 import { CaStatus, CaType, useListExternalCasByProjectId } from "@app/hooks/api";
 import { caStatusToNameMap, getCaStatusBadgeVariant } from "@app/hooks/api/ca/constants";

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.tsx

@@ -5,18 +5,17 @@ import {
   faEllipsis,
   faEye,
   faFileExport,
-  faQuestionCircle,
   faRedo,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
+import { CircleQuestionMarkIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -33,6 +32,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionCertificateActions,
   ProjectPermissionSub,
@@ -58,7 +58,7 @@ const isExpiringWithinOneDay = (notAfter: string): boolean => {
 
 const getAutoRenewalInfo = (certificate: TCertificate) => {
   if (certificate.renewedByCertificateId) {
-    return { text: "Renewed", variant: "instance" as const };
+    return { text: "Renewed", variant: "neutral" as const };
   }
 
   const isRevoked = certificate.status === CertStatus.REVOKED;
@@ -69,7 +69,7 @@ const getAutoRenewalInfo = (certificate: TCertificate) => {
   if (isRevoked) {
     return {
       text: "Not Available",
-      variant: "instance" as const,
+      variant: "neutral" as const,
       tooltip: "Renewal is not available for revoked certificates"
     };
   }
@@ -77,7 +77,7 @@ const getAutoRenewalInfo = (certificate: TCertificate) => {
   if (isExpired) {
     return {
       text: "Not Available",
-      variant: "instance" as const,
+      variant: "neutral" as const,
       tooltip: "Renewal is not available for expired certificates"
     };
   }
@@ -85,7 +85,7 @@ const getAutoRenewalInfo = (certificate: TCertificate) => {
   if (hasNoProfile) {
     return {
       text: "Not Available",
-      variant: "instance" as const,
+      variant: "neutral" as const,
       tooltip: "Renewal requires a certificate profile"
     };
   }
@@ -93,7 +93,7 @@ const getAutoRenewalInfo = (certificate: TCertificate) => {
   if (certificate.hasPrivateKey === false) {
     return {
       text: "Not Available",
-      variant: "instance" as const,
+      variant: "neutral" as const,
       tooltip: "Renewal is not available for certificates with externally generated private keys"
     };
   }
@@ -101,7 +101,7 @@ const getAutoRenewalInfo = (certificate: TCertificate) => {
   if (isExpiringWithinDay) {
     return {
       text: "Not Available",
-      variant: "instance" as const,
+      variant: "neutral" as const,
       tooltip: "Auto-renewal is not available for certificates expiring within 24 hours"
     };
   }
@@ -115,7 +115,7 @@ const getAutoRenewalInfo = (certificate: TCertificate) => {
   }
 
   if (!certificate.renewBeforeDays) {
-    return { text: "Auto-Renewal Disabled", variant: "primary" as const };
+    return { text: "Auto-Renewal Disabled", variant: "warning" as const };
   }
 
   const notAfterDate = new Date(certificate.notAfter);
@@ -133,11 +133,11 @@ const getAutoRenewalInfo = (certificate: TCertificate) => {
   );
 
   if (daysUntilRenewal === 0) {
-    return { text: "Renews today", variant: "primary" as const };
+    return { text: "Renews today", variant: "warning" as const };
   }
 
   if (daysUntilRenewal <= 7) {
-    return { text: `Renews in ${daysUntilRenewal}d`, variant: "primary" as const };
+    return { text: `Renews in ${daysUntilRenewal}d`, variant: "warning" as const };
   }
 
   return { text: `Renews in ${daysUntilRenewal}d`, variant: "success" as const };
@@ -279,16 +279,12 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
                     {autoRenewalInfo &&
                       (autoRenewalInfo.tooltip ? (
                         <div className="flex items-center gap-2">
-                          <Badge variant={autoRenewalInfo.variant}>
+                          <Tooltip content={autoRenewalInfo.tooltip}>
-                            {autoRenewalInfo.text}
+                            <Badge variant={autoRenewalInfo.variant}>
-                            <Tooltip content={autoRenewalInfo.tooltip}>
+                              {autoRenewalInfo.text}
-                              <FontAwesomeIcon
+                              <CircleQuestionMarkIcon />
-                                icon={faQuestionCircle}
+                            </Badge>
-                                className="ml-1 cursor-help text-red-400 hover:text-red-300"
+                          </Tooltip>
-                                size="sm"
-                              />
-                            </Tooltip>
-                          </Badge>
                         </div>
                       ) : (
                         <Badge variant={autoRenewalInfo.variant}>{autoRenewalInfo.text}</Badge>

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTable.utils.ts

@@ -5,13 +5,13 @@ export const getCertValidUntilBadgeDetails = (notAfter: string) => {
   const notAfterDate = new Date(notAfter).getTime();
   const diffInMs = notAfterDate - currentDate;
 
-  let variant: "success" | "primary" | "danger" = "success";
+  let variant: "success" | "warning" | "danger" = "success";
   let label = "Healthy";
 
   if (diffInMs > ms("60d")) {
     variant = "success";
   } else if (diffInMs > ms("30d")) {
-    variant = "primary";
+    variant = "warning";
   } else {
     variant = "danger";
   }

frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncTable/PkiSyncRow.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo } from "react";
 import { subject } from "@casl/ability";
 import {
-  faBan,
   faCalendarCheck,
   faCheck,
   faCopy,
@@ -19,6 +18,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";
+import { BanIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -29,7 +29,6 @@ import {
   PkiSyncStatusBadge
 } from "@app/components/pki-syncs";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -39,6 +38,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -172,10 +172,7 @@ export const PkiSyncRow = ({
         <Td>
           <Tooltip content="The PKI subscriber for this sync has been deleted. Configure a new source or remove this sync.">
             <div className="w-min">
-              <Badge
+              <Badge variant="warning">
-                className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-                variant="primary"
-              >
                 <FontAwesomeIcon icon={faTriangleExclamation} />
                 <span>Source Deleted</span>
               </Badge>
@@ -234,12 +231,10 @@ export const PkiSyncRow = ({
               className="text-xs"
               content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
             >
-              <div>
+              <Badge variant="neutral">
-                <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                <BanIcon />
-                  <FontAwesomeIcon icon={faBan} />
+                {!syncStatus && "Auto-Sync Disabled"}
-                  {!syncStatus && "Auto-Sync Disabled"}
+              </Badge>
-                </Badge>
-              </div>
             </Tooltip>
           )}
           {syncOption?.canImportCertificates && <PkiSyncImportStatusBadge mini pkiSync={pkiSync} />}

frontend/src/pages/cert-manager/IntegrationsListPage/components/PkiSyncsTab/PkiSyncsTab.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useMemo } from "react";
-import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { CreatePkiSyncModal } from "@app/components/pki-syncs";
 import { Button, Spinner } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { ProjectPermissionSub, useProject } from "@app/context";
 import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -64,21 +65,10 @@ export const PkiSyncsTab = () => {
         <div className="mb-4 flex items-center justify-between">
           <div>
             <div className="flex items-start gap-1">
-              <p className="text-xl font-medium text-mineshaft-100">Certificate Syncs</p>
+              <div className="flex items-center gap-x-2">
-              <a
+                <p className="text-xl font-medium text-mineshaft-100">Certificate Syncs</p>
-                href="https://infisical.com/docs/integrations/pki-syncs/overview"
+                <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/certificate-syncs/overview" />
-                target="_blank"
+              </div>
-                rel="noopener noreferrer"
-              >
-                <div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-[10px]"
-                  />
-                </div>
-              </a>
             </div>
             <p className="text-sm text-bunker-300">
               Use App Connections to sync certificates to third-party services.

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx

@@ -7,7 +7,6 @@ import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -24,6 +23,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionPkiSubscriberActions,
   ProjectPermissionSub,
@@ -93,7 +93,7 @@ export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen
     }
 
     if (daysUntilExpiry < 30) {
-      return <Badge variant="primary">Expiring Soon</Badge>;
+      return <Badge variant="warning">Expiring Soon</Badge>;
     }
 
     return <Badge variant="success">Valid</Badge>;

frontend/src/pages/cert-manager/PkiSubscribersPage/components/PkiSubscribersTable.tsx

@@ -11,7 +11,6 @@ import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -27,6 +26,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionPkiSubscriberActions,
   ProjectPermissionSub,

frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncActionTriggers.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from "react";
 import { subject } from "@casl/ability";
 import {
-  faBan,
   faCheck,
   faCopy,
   faDownload,
@@ -15,6 +14,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
+import { BanIcon, RefreshCwIcon } from "lucide-react";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
@@ -26,7 +26,6 @@ import {
   PkiSyncRemoveStatusBadge
 } from "@app/components/pki-syncs";
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -35,6 +34,7 @@ import {
   IconButton,
   Tooltip
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -136,24 +136,19 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
         {syncOption?.canImportCertificates && <PkiSyncImportStatusBadge pkiSync={pkiSync} />}
         <PkiSyncRemoveStatusBadge pkiSync={pkiSync} />
         {pkiSync.isAutoSyncEnabled ? (
-          <Badge
+          <Badge variant="info">
-            variant="success"
+            <RefreshCwIcon />
-            className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+            Auto-Sync Enabled
-          >
-            <FontAwesomeIcon icon={faRotate} />
-            <span>Auto-Sync Enabled</span>
           </Badge>
         ) : (
           <Tooltip
             className="text-xs"
             content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
           >
-            <div>
+            <Badge variant="neutral">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <BanIcon />
-                <FontAwesomeIcon icon={faBan} />
+              Auto-Sync Disabled
-                <span>Auto-Sync Disabled</span>
+            </Badge>
-              </Badge>
-            </div>
           </Tooltip>
         )}
         <div>

frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncOptionsSection/PkiSyncOptionsSection.tsx

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { GenericFieldLabel } from "@app/components/secret-syncs";
-import { Badge, IconButton } from "@app/components/v2";
+import { IconButton } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { TPkiSync } from "@app/hooks/api/pkiSyncs";

frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncSourceSection.tsx

@@ -1,10 +1,12 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import { subject } from "@casl/ability";
-import { faEdit, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AlertTriangleIcon } from "lucide-react";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Badge, IconButton, Tooltip } from "@app/components/v2";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { TPkiSync } from "@app/hooks/api/pkiSyncs";
@@ -36,15 +38,10 @@ export const PkiSyncSourceSection = ({ pkiSync, onEditSource }: Props) => {
           <div>
             {!subscriberId && (
               <Tooltip content="The PKI subscriber for this sync has been deleted. Configure a new source or remove this sync.">
-                <div className="mr-1 inline-block w-min">
+                <Badge variant="danger" className="mr-1">
-                  <Badge
+                  <AlertTriangleIcon />
-                    className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+                  Source Deleted
-                    variant="primary"
+                </Badge>
-                  >
-                    <FontAwesomeIcon icon={faTriangleExclamation} />
-                    <span>Source Deleted</span>
-                  </Badge>
-                </div>
               </Tooltip>
             )}
             <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>

frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx

@@ -12,7 +12,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -21,6 +20,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useProjectPermission } from "@app/context";
 import {
   ProjectPermissionActions,
@@ -45,42 +45,26 @@ const MetricsBadges = ({
   };
 }) => {
   if (!metrics) {
-    return (
+    return <Badge variant="warning">No metrics</Badge>;
-      <Badge variant="primary" className="text-xs">
-        No metrics
-      </Badge>
-    );
   }
 
   if (metrics.totalCertificates === 0) {
-    return (
+    return <Badge variant="warning">No certificates</Badge>;
-      <Badge variant="primary" className="text-xs">
-        No certificates
-      </Badge>
-    );
   }
 
   return (
     <>
       {metrics.activeCertificates > 0 && (
-        <Badge variant="success" className="text-xs">
+        <Badge variant="success">{metrics.activeCertificates} active</Badge>
-          {metrics.activeCertificates} active
-        </Badge>
       )}
       {metrics.expiringCertificates > 0 && (
-        <Badge variant="primary" className="text-xs">
+        <Badge variant="warning">{metrics.expiringCertificates} expiring</Badge>
-          {metrics.expiringCertificates} expiring
-        </Badge>
       )}
       {metrics.expiredCertificates > 0 && (
-        <Badge variant="danger" className="text-xs">
+        <Badge variant="danger">{metrics.expiredCertificates} expired</Badge>
-          {metrics.expiredCertificates} expired
-        </Badge>
       )}
       {metrics.revokedCertificates > 0 && (
-        <Badge variant="danger" className="text-xs">
+        <Badge variant="danger">{metrics.revokedCertificates} revoked</Badge>
-          {metrics.revokedCertificates} revoked
-        </Badge>
       )}
     </>
   );
@@ -135,7 +119,7 @@ export const ProfileRow = ({ profile, onEditProfile, onDeleteProfile }: Props) =
   const getEnrollmentTypeBadge = (enrollmentType: string) => {
     const config = {
       api: { variant: "success" as const, label: "API" },
-      est: { variant: "primary" as const, label: "EST" }
+      est: { variant: "warning" as const, label: "EST" }
     } as const;
 
     const configKey = Object.keys(config).includes(enrollmentType)

frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx

@@ -23,7 +23,6 @@ import { motion } from "framer-motion";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -44,7 +43,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import {
   ProjectPermissionActions,
   ProjectPermissionCmekActions,
@@ -72,7 +71,7 @@ import { DeleteCmekModal } from "./DeleteCmekModal";
 
 const getStatusBadgeProps = (
   isDisabled: boolean
-): { variant: BadgeProps["variant"]; label: string } => {
+): { variant: TBadgeProps["variant"]; label: string } => {
   if (isDisabled) {
     return {
       variant: "danger",

frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx

@@ -7,7 +7,6 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { decodeBase64 } from "@app/components/utilities/cryptography/crypto";
 import {
-  Badge,
   Button,
   FormControl,
   Modal,
@@ -19,6 +18,7 @@ import {
   TextArea,
   Tooltip
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { SigningAlgorithm, TCmek, useCmekVerify } from "@app/hooks/api/cmeks";
 import { isBase64 } from "@app/lib/fn/base64";
 
@@ -112,30 +112,22 @@ const VerifyForm = ({ cmek }: FormProps) => {
         <div className="mb-6 flex flex-col gap-2">
           <div className="flex items-center justify-between space-x-2">
             <span className="text-sm opacity-60">Signature Status:</span>
-            <Badge variant={signatureValid ? "success" : "danger"}>
+            <Tooltip
-              <Tooltip
+              content={
-                content={
+                signatureValid
-                  signatureValid
+                  ? "The signature is valid. signature was created using the same signing algorithm and key as the one used to sign the data."
-                    ? "The signature is valid. signature was created using the same signing algorithm and key as the one used to sign the data."
+                  : "The signature is invalid. The signature was not created using the same signing algorithm and key as the one used to sign the data. The data and signature may have been tampered with."
-                    : "The signature is invalid. The signature was not created using the same signing algorithm and key as the one used to sign the data. The data and signature may have been tampered with."
+              }
-                }
+            >
-              >
+              <Badge variant={signatureValid ? "success" : "danger"}>
-                {signatureValid ? (
+                {signatureValid ? "Valid" : "Invalid"}
-                  <div className="flex items-center justify-center gap-2">
+              </Badge>
-                    <p>Valid</p>
+            </Tooltip>
-                  </div>
-                ) : (
-                  <div className="flex items-center justify-center gap-2">
-                    <p>Invalid</p>
-                  </div>
-                )}
-              </Tooltip>
-            </Badge>
           </div>
 
           <div className="flex items-center justify-between gap-2">
             <span className="text-sm opacity-60">Signing Algorithm:</span>
-            <Badge variant="primary">{signingAlgorithm}</Badge>
+            <Badge variant="info">{signingAlgorithm}</Badge>
           </div>
           <div className="mt-3">
             <span className="text-sm opacity-60">Signature:</span>{" "}

frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx

@@ -5,6 +5,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { OrgPermissionGroupActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { useDeleteGroup } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -58,7 +59,10 @@ export const OrgGroupsSection = () => {
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Groups</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Groups</p>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/groups" />
+        </div>
         <OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Button

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx

@@ -4,7 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { Badge, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
+import { FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -277,7 +278,7 @@ export const IdentityAuthMethodModalContent = ({
                     >
                       {label}{" "}
                       {alreadyConfigured && !isSelectedAuthAlreadyConfigured && (
-                        <Badge>Configured</Badge>
+                        <Badge variant="info">Configured</Badge>
                       )}
                     </SelectItem>
                   </Tooltip>

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -1,15 +1,11 @@
-import {
+import { faLink, faPlus } from "@fortawesome/free-solid-svg-icons";
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faLink,
-  faPlus
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal, Modal, ModalContent } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   OrgPermissionIdentityActions,
   OrgPermissionSubjects,
@@ -113,22 +109,9 @@ export const IdentitySection = withPermission(
       <div>
         <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex w-full items-center gap-4">
-            <div className="flex flex-1 items-center gap-1">
+            <div className="flex flex-1 items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">Identities</p>
-              <a
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/machine-identities" />
-                href="https://infisical.com/docs/documentation/platform/identities/overview"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mt-[0.16rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-[10px]"
-                  />
-                </div>
-              </a>
             </div>
             {isSubOrganization && (
               <OrgPermissionCan
@@ -181,22 +164,9 @@ export const IdentitySection = withPermission(
         {/* Identity Auth Templates Section */}
         <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
           <div className="mb-4 flex items-center justify-between">
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">Identity Auth Templates</p>
-              <a
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/auth-templates" />
-                href="https://infisical.com/docs/documentation/platform/identities/auth-templates"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mt-[0.16rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-[10px]"
-                  />
-                </div>
-              </a>
             </div>
             <OrgPermissionCan
               I={OrgPermissionMachineIdentityAuthTemplateActions.CreateTemplates}

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react";
-import { faBan, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { BanIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   Button,
   DeleteActionModal,
   EmailServiceSetupModal,
@@ -15,6 +15,7 @@ import {
   ModalContent,
   Tooltip
 } from "@app/components/v2";
+import { Badge, DocumentationLinkBadge } from "@app/components/v3";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -207,7 +208,10 @@ export const OrgMembersSection = () => {
       </div>
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
-          <p className="text-xl font-medium text-mineshaft-100">Users</p>
+          <div className="flex items-center gap-x-2">
+            <p className="text-xl font-medium text-mineshaft-100">Users</p>
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/user-identities" />
+          </div>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
             {(isAllowed) => (
               <Button
@@ -303,15 +307,10 @@ export const OrgMembersSection = () => {
                       </p>
                       {userId === member.user.id && (
                         <Tooltip content="You cannot remove yourself from this organization">
-                          <div className="inline-block">
+                          <Badge variant="danger" className="ml-2">
-                            <Badge
+                            <BanIcon />
-                              variant="danger"
+                            Ignored
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                          </Badge>
-                            >
-                              <FontAwesomeIcon icon={faBan} />
-                              <span>Ignored</span>
-                            </Badge>
-                          </div>
                         </Tooltip>
                       )}
                     </div>

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -11,19 +11,18 @@ import {
   faMagnifyingGlass,
   faSearch,
   faUsers,
-  faUserShield,
   faUserSlash,
   faUserXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
+import { UserCogIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { LastLoginSection } from "@app/components/organization/LastLoginSection";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   Button,
   Checkbox,
   DropdownMenu,
@@ -50,6 +49,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -520,17 +520,17 @@ export const OrgMembersTable = ({
                       <Td
                         className={twMerge("group max-w-0", isActive ? "" : "text-mineshaft-400")}
                       >
-                        <div className="flex items-center">
+                        <div className="flex items-center gap-x-2">
                           <p className="truncate">
                             {name ?? <span className="text-mineshaft-400">Not Set</span>}
                           </p>
                           {u.superAdmin && (
-                            <Badge variant="primary" className="ml-2 w-min whitespace-nowrap">
+                            <Tooltip content="Server Admin">
-                              <span className="mr-1 hidden xl:inline">Server Admin</span>
+                              <Badge variant="info">
-                              <Tooltip content="Server Admin">
+                                <UserCogIcon />
-                                <FontAwesomeIcon className="xl:hidden" icon={faUserShield} />
+                                <span className="hidden xl:inline">Server Admin</span>
-                              </Tooltip>
+                              </Badge>
-                            </Badge>
+                            </Tooltip>
                           )}
                           {lastLoginAuthMethod && lastLoginTime && (
                             <Tooltip

frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -14,13 +14,13 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
+import { ServerIcon, WrenchIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   Button,
   DeleteActionModal,
   DropdownMenu,
@@ -41,13 +41,14 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge, DocumentationLinkBadge } from "@app/components/v3";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
   useSubscription
 } from "@app/context";
-import { isCustomOrgRole, isCustomProjectRole } from "@app/helpers/roles";
+import { isCustomOrgRole } from "@app/helpers/roles";
 import {
   getUserTablePreference,
   PreferenceKey,
@@ -200,9 +201,12 @@ export const OrgRoleTable = () => {
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">
+        <div className="flex items-center gap-x-2">
-          {isSubOrganization ? "Sub-" : ""}Organization Roles
+          <p className="text-xl font-medium text-mineshaft-100">
-        </p>
+            {isSubOrganization ? "Sub-" : ""}Organization Roles
+          </p>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/organization#roles-and-access-control" />
+        </div>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
           {(isAllowed) => (
             <Button
@@ -295,17 +299,13 @@ export const OrgRoleTable = () => {
                   }
                 >
                   <Td className="max-w-md">
-                    <div className="flex">
+                    <div className="flex gap-x-1.5">
                       <p className="overflow-hidden text-ellipsis whitespace-nowrap">{name}</p>
                       {isDefaultOrgRole && (
                         <Tooltip
                           content={`Members joining your organization will be assigned the ${name} role unless otherwise specified.`}
                         >
-                          <div>
+                          <Badge variant="info">Default</Badge>
-                            <Badge variant="success" className="ml-1">
-                              Default
-                            </Badge>
-                          </div>
                         </Tooltip>
                       )}
                     </div>
@@ -314,8 +314,18 @@ export const OrgRoleTable = () => {
                     {slug}
                   </Td>
                   <Td>
-                    <Badge className="w-min bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
+                    <Badge variant="ghost">
-                      {isCustomProjectRole(slug) ? "Custom" : "Default"}
+                      {isCustomOrgRole(slug) ? (
+                        <>
+                          <WrenchIcon />
+                          Custom
+                        </>
+                      ) : (
+                        <>
+                          <ServerIcon />
+                          Platform
+                        </>
+                      )}
                     </Badge>
                   </Td>
                   <Td>

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx

@@ -1,6 +1,6 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 
@@ -29,23 +29,11 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
         )}
       </div>
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {appDetails.name}
-          <a
+          <DocumentationLinkBadge
             href={`https://infisical.com/docs/integrations/app-connections/${app}`}
-            target="_blank"
+          />
-            className="mb-1 ml-1"
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`}

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionRow.tsx

@@ -8,18 +8,17 @@ import {
   faEdit,
   faEllipsisV,
   faInfoCircle,
-  faServer,
   faTable,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "@tanstack/react-router";
+import { ServerIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { VariablePermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -29,6 +28,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { OrgPermissionSubjects, ProjectPermissionSub } from "@app/context";
 import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
 import { ProjectPermissionAppConnectionActions } from "@app/context/ProjectPermissionContext/types";
@@ -157,9 +157,9 @@ export const AppConnectionRow = ({
           {isPlatformManagedCredentials && (
             <Tooltip side="left" content="This connection's credentials are managed by Infisical.">
               <div>
-                <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
+                <Badge variant="info">
-                  <FontAwesomeIcon icon={faServer} />
+                  <ServerIcon />
-                  <span>Platform Managed Credentials</span>
+                  Platform Managed Credentials
                 </Badge>
               </div>
             </Tooltip>

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx

@@ -2,8 +2,6 @@ import { useMemo, useState } from "react";
 import {
   faArrowDown,
   faArrowUp,
-  faArrowUpRightFromSquare,
-  faBookOpen,
   faCheckCircle,
   faFilter,
   faMagnifyingGlass,
@@ -34,6 +32,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { OrgPermissionSubjects, ProjectPermissionSub } from "@app/context";
 import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
 import { ProjectPermissionAppConnectionActions } from "@app/context/ProjectPermissionContext/types";
@@ -212,22 +211,9 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <div className="flex items-center gap-1">
+          <div className="flex items-center gap-x-2">
             <p className="text-xl font-medium text-mineshaft-100">App Connections</p>
-            <a
+            <DocumentationLinkBadge href="https://infisical.com/docs/integrations/app-connections/overview" />
-              href="https://infisical.com/docs/integrations/app-connections/overview"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div className="mt-[0.12rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                <span>Docs</span>
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.07rem] ml-1.5 text-[10px]"
-                />
-              </div>
-            </a>
           </div>
           <p className="text-sm text-bunker-300">
             Create and configure connections with third-party apps for re-use across your project

frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx

@@ -8,7 +8,6 @@ import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -20,6 +19,7 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useOrganization } from "@app/context";
 import { useGetUserProjects } from "@app/hooks/api";
 import {
@@ -124,7 +124,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
         <Button variant="outline_bg" colorSchema="primary" className="relative">
           <FontAwesomeIcon icon={faFilterCircleXmark} />
           {activeFilterCount > 0 && (
-            <Badge className="absolute right-0 bottom-0" variant="primary">
+            <Badge className="absolute -top-2 -right-2" variant="info">
               {activeFilterCount}
             </Badge>
           )}
@@ -137,7 +137,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
               <div className="flex w-full items-center justify-between">
                 <div className="flex items-center gap-2">
                   <span>Filters</span>
-                  <Badge className="px-1.5 py-0.5" variant="primary">
+                  <Badge isSquare variant="info">
                     {activeFilterCount}
                   </Badge>
                 </div>

frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ms from "ms";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   OrgPermissionAuditLogsActions,
   OrgPermissionSubjects,
@@ -76,22 +75,9 @@ const LogsSectionComponent = ({
       <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
           <div>
-            <div className="flex items-center gap-1 whitespace-nowrap">
+            <div className="flex items-center gap-x-2 whitespace-nowrap">
               <p className="text-xl font-medium text-mineshaft-100">Audit History</p>
-              <a
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/audit-logs" />
-                href="https://infisical.com/docs/documentation/platform/audit-logs"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mt-[0.1rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-[10px]"
-                  />
-                </div>
-              </a>
             </div>
           </div>
           <div className="flex flex-wrap items-center gap-2 lg:justify-end">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx

@@ -1,7 +1,8 @@
-import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { EyeIcon } from "lucide-react";
 
-import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useGetIdentityJwtAuth } from "@app/hooks/api";
 import { IdentityJwtConfigurationType } from "@app/hooks/api/identities/enums";
 import { IdentityJwtAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityJwtAuthForm";
@@ -78,12 +79,10 @@ export const ViewIdentityJwtAuthContent = ({
                   <p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.jwksCaCert}</p>
                 }
               >
-                <div className="w-min">
+                <Badge variant="neutral">
-                  <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                  <EyeIcon />
-                    <FontAwesomeIcon icon={faEye} />
+                  Reveal
-                    <span>Reveal</span>
+                </Badge>
-                  </Badge>
-                </div>
               </Tooltip>
             )}
           </IdentityAuthFieldDisplay>
@@ -103,12 +102,10 @@ export const ViewIdentityJwtAuthContent = ({
                     </p>
                   }
                 >
-                  <div className="inline-block w-min">
+                  <Badge variant="neutral">
-                    <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+                    <EyeIcon />
-                      <FontAwesomeIcon icon={faEye} />
+                    Key {index + 1}
-                      <span>Key {index + 1}</span>
+                  </Badge>
-                    </Badge>
-                  </div>
                 </Tooltip>
               ))}
             </div>
@@ -138,12 +135,10 @@ export const ViewIdentityJwtAuthContent = ({
               </pre>
             }
           >
-            <div className="w-min">
+            <Badge variant="neutral">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <EyeIcon />
-                <FontAwesomeIcon icon={faEye} />
+              Reveal
-                <span>Reveal</span>
+            </Badge>
-              </Badge>
-            </div>
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from "react";
-import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQuery } from "@tanstack/react-query";
+import { EyeIcon } from "lucide-react";
 
-import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { gatewaysQueryKeys, useGetIdentityKubernetesAuth } from "@app/hooks/api";
 import { IdentityKubernetesAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm";
 
@@ -89,12 +90,10 @@ export const ViewIdentityKubernetesAuthContent = ({
               </p>
             }
           >
-            <div className="w-min">
+            <Badge variant="neutral">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <EyeIcon />
-                <FontAwesomeIcon icon={faEye} />
+              Reveal
-                <span>Reveal</span>
+            </Badge>
-              </Badge>
-            </div>
           </Tooltip>
         ) : (
           <p className="text-base leading-4 text-bunker-400 italic">Not set</p>
@@ -122,12 +121,10 @@ export const ViewIdentityKubernetesAuthContent = ({
             className="max-w-xl p-2"
             content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
           >
-            <div className="w-min">
+            <Badge variant="neutral">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <EyeIcon />
-                <FontAwesomeIcon icon={faEye} />
+              Reveal
-                <span>Reveal</span>
+            </Badge>
-              </Badge>
-            </div>
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityLdapAuthContent.tsx

@@ -1,7 +1,8 @@
-import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { EyeIcon } from "lucide-react";
 
-import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useClearIdentityLdapAuthLockouts, useGetIdentityLdapAuth } from "@app/hooks/api";
 import { IdentityLdapAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm";
 import { ViewIdentityContentWrapper } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper";
@@ -72,12 +73,10 @@ export const ViewIdentityLdapAuthContent = ({
           className="max-w-xl p-2"
           content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.bindPass}</p>}
         >
-          <div className="w-min">
+          <Badge variant="neutral">
-            <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+            <EyeIcon />
-              <FontAwesomeIcon icon={faEye} />
+            Reveal
-              <span>Reveal</span>
+          </Badge>
-            </Badge>
-          </div>
         </Tooltip>
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Search Base / DN">
@@ -95,12 +94,10 @@ export const ViewIdentityLdapAuthContent = ({
               </p>
             }
           >
-            <div className="w-min">
+            <Badge variant="neutral">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <EyeIcon />
-                <FontAwesomeIcon icon={faEye} />
+              Reveal
-                <span>Reveal</span>
+            </Badge>
-              </Badge>
-            </div>
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx

@@ -1,7 +1,8 @@
-import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { EyeIcon } from "lucide-react";
 
-import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useGetIdentityOidcAuth } from "@app/hooks/api";
 import { IdentityOidcAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm";
 import { ViewIdentityContentWrapper } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper";
@@ -73,12 +74,10 @@ export const ViewIdentityOidcAuthContent = ({
             className="max-w-xl p-2"
             content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
           >
-            <div className="w-min">
+            <Badge variant="neutral">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <EyeIcon />
-                <FontAwesomeIcon icon={faEye} />
+              Reveal
-                <span>Reveal</span>
+            </Badge>
-              </Badge>
-            </div>
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>
@@ -102,12 +101,10 @@ export const ViewIdentityOidcAuthContent = ({
               </pre>
             }
           >
-            <div className="w-min">
+            <Badge variant="neutral">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <EyeIcon />
-                <FontAwesomeIcon icon={faEye} />
+              Reveal
-                <span>Reveal</span>
+            </Badge>
-              </Badge>
-            </div>
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>
@@ -122,12 +119,10 @@ export const ViewIdentityOidcAuthContent = ({
               </pre>
             }
           >
-            <div className="w-min">
+            <Badge variant="neutral">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <EyeIcon />
-                <FontAwesomeIcon icon={faEye} />
+              Reveal
-                <span>Reveal</span>
+            </Badge>
-              </Badge>
-            </div>
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTlsCertAuthContent.tsx

@@ -1,7 +1,8 @@
-import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { EyeIcon } from "lucide-react";
 
-import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useGetIdentityTlsCertAuth } from "@app/hooks/api";
 import { IdentityTlsCertAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTlsCertAuthForm";
 
@@ -71,12 +72,10 @@ export const ViewIdentityTlsCertAuthContent = ({
             <p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCertificate}</p>
           }
         >
-          <div className="w-min">
+          <Badge variant="neutral">
-            <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+            <EyeIcon />
-              <FontAwesomeIcon icon={faEye} />
+            Reveal
-              <span>Reveal</span>
+          </Badge>
-            </Badge>
-          </div>
         </Tooltip>
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Common Names">

frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx

@@ -1,7 +1,5 @@
 import { useState } from "react";
 import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
   faCopy,
   faDoorClosed,
   faEdit,
@@ -39,6 +37,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   OrgGatewayPermissionActions,
   OrgPermissionSubjects
@@ -106,22 +105,9 @@ export const GatewayTab = withPermission(
     return (
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-2 flex items-center justify-between">
-          <div className="flex grow items-center gap-2">
+          <div className="flex grow items-center gap-x-2">
             <h3 className="text-lg font-medium text-mineshaft-100">Gateways</h3>
-            <a
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/gateways/overview" />
-              href="https://infisical.com/docs/documentation/platform/gateways/overview"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div className="inline-block rounded-md bg-yellow/20 px-1.5 py-0.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                <span>Docs</span>
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.07rem] ml-1.5 text-[10px]"
-                />
-              </div>
-            </a>
             <div className="flex grow" />
             <Button
               variant="outline_bg"

frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
   faCopy,
   faDoorClosed,
   faEllipsisV,
@@ -37,6 +35,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
   OrgPermissionSubjects,
@@ -116,22 +115,9 @@ export const RelayTab = withPermission(
     return (
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-2 flex items-center justify-between">
-          <div className="flex grow items-center gap-2">
+          <div className="flex grow items-center gap-x-2">
             <h3 className="text-lg font-medium text-mineshaft-100">Relays</h3>
-            <a
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/gateways/relay-deployment" />
-              href="https://infisical.com/docs/documentation/platform/gateways/relay-deployment"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div className="inline-block rounded-md bg-yellow/20 px-1.5 py-0.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                <span>Docs</span>
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.07rem] ml-1.5 text-[10px]"
-                />
-              </div>
-            </a>
             <div className="flex grow" />
             <Button
               variant="outline_bg"

frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import {
   faArrowDownAZ,
   faBorderAll,
-  faCheck,
   faCheckCircle,
   faFolderOpen,
   faList,
@@ -11,13 +10,13 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
+import { CheckIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { RequestProjectAccessModal } from "@app/components/projects/RequestProjectAccessModal";
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -31,6 +30,7 @@ import {
   Skeleton,
   Tooltip
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { OrgPermissionAdminConsoleAction } from "@app/context/OrgPermissionContext/types";
 import { getProjectHomePage, getProjectLottieIcon, getProjectTitle } from "@app/helpers/project";
@@ -308,9 +308,9 @@ export const AllProjectView = ({
                 </div>
               </div>
               {workspace.isMember ? (
-                <Badge className="flex items-center" variant="success">
+                <Badge variant="info">
-                  <FontAwesomeIcon icon={faCheck} className="mr-1" />
+                  <CheckIcon />
-                  <span>Joined</span>
+                  Joined
                 </Badge>
               ) : (
                 <OrgPermissionCan

frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestedSecretsRow.tsx

@@ -3,7 +3,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { createNotification } from "@app/components/notifications";
-import { Badge, IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   SecretSharingAccessType,
   TSharedSecret,
@@ -35,27 +36,23 @@ export const RequestedSecretsRow = ({
         {isExpired && !row.encryptedSecret ? (
           <Badge variant="danger">Expired</Badge>
         ) : (
-          <Badge variant={row.encryptedSecret ? "success" : "primary"}>
+          <Badge variant={row.encryptedSecret ? "success" : "warning"}>
             {row.encryptedSecret ? "Secret Provided" : "Pending Secret"}
           </Badge>
         )}
       </Td>
       <Td>
-        <Badge variant="primary">
+        <Tooltip
-          <Tooltip
+          content={
-            content={
+            row.accessType === SecretSharingAccessType.Anyone
-              row.accessType === SecretSharingAccessType.Anyone
+              ? "Anyone can input the secret."
-                ? "Anyone can input the secret."
+              : "Only members of the organization can input the secret."
-                : "Only members of the organization can input the secret."
+          }
-            }
+        >
-          >
+          <Badge variant="info">
-            <div>
+            {row.accessType === SecretSharingAccessType.Anyone ? "Anyone" : "Organization Members"}
-              {row.accessType === SecretSharingAccessType.Anyone
+          </Badge>
-                ? "Anyone"
+        </Tooltip>
-                : "Organization Members"}
-            </div>
-          </Tooltip>
-        </Badge>
       </Td>
       <Td>{`${format(new Date(row.createdAt), "yyyy-MM-dd - HH:mm a")}`}</Td>
       <Td>{row.expiresAt ? format(new Date(row.expiresAt), "yyyy-MM-dd - HH:mm a") : "-"}</Td>

frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretsRow.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
-import { Badge } from "@app/components/v2/Badge";
+import { Badge } from "@app/components/v3";
 import { TSharedSecret } from "@app/hooks/api/secretSharing";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 

frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx

@@ -1,6 +1,6 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams";
 import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
 
@@ -34,20 +34,9 @@ export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Prop
         )}
       </div>
       <div>
-        <div className="mb-1 flex items-center text-mineshaft-300">
+        <div className="mb-1 flex items-center gap-x-2 text-mineshaft-300">
           {providerDetails.name}
-          <a
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/audit-log-streams/audit-log-streams#example-providers" />
-            href="https://infisical.com/docs/documentation/platform/audit-log-streams/audit-log-streams#example-providers"
-            target="_blank"
-            className="ml-1"
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-px text-xs" />
-              <span>Docs</span>
-              <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mb-px ml-1 text-[10px]" />
-            </div>
-          </a>
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {logStreamExists

frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/AwsKmsForm.tsx

@@ -2,7 +2,8 @@ import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Badge, Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useOrganization } from "@app/context";
 import { useAddExternalKms, useUpdateExternalKms } from "@app/hooks/api";
 import {
@@ -244,7 +245,7 @@ export const AwsKmsForm = ({ onCompleted, onCancel, kms }: Props) => {
             >
               {AWS_REGIONS.map((awsRegion) => (
                 <SelectItem value={awsRegion.slug} key={`kms-aws-region-${awsRegion.slug}`}>
-                  {awsRegion.name} <Badge variant="success">{awsRegion.slug}</Badge>
+                  {awsRegion.name} <Badge variant="neutral">{awsRegion.slug}</Badge>
                 </SelectItem>
               ))}
             </Select>

frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/GcpKmsForm.tsx

@@ -3,7 +3,8 @@ import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Badge, Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
+import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useOrganization } from "@app/context";
 import {
   useAddExternalKms,
@@ -71,7 +72,7 @@ const GCP_REGIONS = [
 const formatOptionLabel = ({ value, label }: { value: string; label: string }) => (
   <div className="flex w-full flex-row items-center justify-between">
     <span>{label}</span>
-    <Badge variant="success">{value}</Badge>
+    <Badge variant="neutral">{value}</Badge>
   </div>
 );
 

frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/SSOModalHeader.tsx

@@ -1,5 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { DocumentationLinkBadge } from "@app/components/v3";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type ProviderDetails = {
   label: string;
@@ -24,23 +23,9 @@ export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
         className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {providerDetails.label}
-          <a
+          <DocumentationLinkBadge href={`${docsBaseUrl}/${providerDetails.docsUrl}`} />
-            href={`${docsBaseUrl}/${providerDetails.docsUrl}`}
-            target="_blank"
-            className="mb-1 ml-1"
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConnected

frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab.tsx

@@ -7,7 +7,6 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   Button,
   DeleteActionModal,
   DropdownMenu,
@@ -24,6 +23,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
@@ -48,7 +48,7 @@ const renderStatus = (status: WorkflowIntegrationStatus) => {
   }
 
   if (status === WorkflowIntegrationStatus.Pending) {
-    return <Badge variant="primary">Pending</Badge>;
+    return <Badge variant="warning">Pending</Badge>;
   }
 
   return <Badge variant="danger">Failed</Badge>;

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { TProjectTemplate } from "@app/hooks/api/projectTemplates";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -33,22 +34,9 @@ export const ProjectTemplatesSection = () => {
             project setup
           </p>
           <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <div className="mb-4 flex items-start">
+            <div className="mb-4 flex items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
-              <a
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/project-templates" />
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://infisical.com/docs/documentation/platform/project-templates"
-              >
-                <div className="mt-[0.32rem] ml-2 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-[10px]"
-                  />
-                </div>
-              </a>
               <OrgPermissionCan
                 I={OrgPermissionActions.Create}
                 a={OrgPermissionSubjects.ProjectTemplates}

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/MySQLAccountForm.tsx

@@ -1,14 +1,14 @@
-import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { Button, ModalClose } from "@app/components/v2";
 import { PamResourceType, TMySQLAccount } from "@app/hooks/api/pam";
 import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
 
-import { GenericAccountFields, genericAccountFieldsSchema } from "./GenericAccountFields";
 import { BaseSqlAccountSchema } from "./shared/sql-account-schemas";
 import { SqlAccountFields } from "./shared/SqlAccountFields";
+import { GenericAccountFields, genericAccountFieldsSchema } from "./GenericAccountFields";
 
 type Props = {
   account?: TMySQLAccount;

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/PostgresAccountForm.tsx

@@ -1,6 +1,6 @@
-import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { Button, ModalClose } from "@app/components/v2";
@@ -12,10 +12,10 @@ import {
 } from "@app/hooks/api/pam";
 import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
 
-import { GenericAccountFields, genericAccountFieldsSchema } from "./GenericAccountFields";
-import { RotateAccountFields, rotateAccountFieldsSchema } from "./RotateAccountFields";
 import { BaseSqlAccountSchema } from "./shared/sql-account-schemas";
 import { SqlAccountFields } from "./shared/SqlAccountFields";
+import { GenericAccountFields, genericAccountFieldsSchema } from "./GenericAccountFields";
+import { RotateAccountFields, rotateAccountFieldsSchema } from "./RotateAccountFields";
 
 type Props = {
   account?: TPostgresAccount;

frontend/src/pages/pam/PamAccountsPage/components/PamAccountRow.tsx

@@ -1,23 +1,20 @@
 import { useCallback } from "react";
 import {
-  faBoxOpen,
   faCheck,
   faCopy,
   faEdit,
   faEllipsisV,
-  faFolder,
   faRightToBracket,
-  faRotate,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatDistance } from "date-fns";
+import { FolderIcon, PackageOpenIcon, RefreshCwIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -29,6 +26,7 @@ import {
   Tr
 } from "@app/components/v2";
 import { HighlightText } from "@app/components/v2/HighlightText";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionPamAccountActions } from "@app/context/ProjectPermissionContext/types";
 import { useToggle } from "@app/hooks";
@@ -88,23 +86,23 @@ export const PamAccountRow = ({
             <span>
               <HighlightText text={name} highlight={search} />
             </span>
-            <Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
+            <Badge variant="neutral">
-              <FontAwesomeIcon icon={faBoxOpen} />
+              <PackageOpenIcon />
               <span>
                 <HighlightText text={account.resource.name} highlight={search} />
               </span>
             </Badge>
             {isFlatView && accountPath && (
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
+              <Badge variant="neutral">
-                <FontAwesomeIcon icon={faFolder} />
+                <FolderIcon />
                 <span>
                   <HighlightText text={accountPath} highlight={search} />
                 </span>
               </Badge>
             )}
             {account.lastRotatedAt && (
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-orange/20 whitespace-nowrap text-orange">
+              <Badge variant="info">
-                <FontAwesomeIcon icon={faRotate} />
+                <RefreshCwIcon />
                 <span>Rotated {formatDistance(new Date(), account.lastRotatedAt)} ago</span>
               </Badge>
             )}

frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx

@@ -3,7 +3,7 @@ import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Badge } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { PAM_RESOURCE_TYPE_MAP, PamResourceType } from "@app/hooks/api/pam";
 
 export const PamResourceOption = ({
@@ -27,7 +27,7 @@ export const PamResourceOption = ({
           <>
             <p className="truncate">{children}</p>
             <div className="mr-auto ml-2">
-              <Badge className="flex h-5 items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge variant="neutral">
                 <img
                   alt={`${name} logo`}
                   src={`/images/integrations/${image}`}