feature: migrate to v3 badge, additional badge stories, re-useable documentation link badge 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.">
-                <div className="mr-auto ml-2">
-                  <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" />
+              <Tooltip
+                content={`This connection belongs to your ${isSubOrganization ? "sub-" : ""}organization.`}
+              >
+                {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 {
-  faCheck,
-  faDownload,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } 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 { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Tooltip } from "@app/components/v2";
+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
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          variant={variant}
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
+      <Badge isSquare={mini} variant={variant}>
+        <Icon />
+        {!mini && label}
+      </Badge>
     </Tooltip>
   );
 };

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

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
+import { DocumentationLinkBadge } from "@app/components/v3";
 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
-            target="_blank"
-            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>
+          <DocumentationLinkBadge
+            href={`https://infisical.com/docs/documentation/platform/pki/certificate-syncs/${destination}`}
+          />
         </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 {
-  faCheck,
-  faEraser,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } 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 { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Tooltip } from "@app/components/v2";
+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
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          variant={variant}
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
+      <Badge isSquare={mini} variant={variant}>
+        <Icon />
+        {!mini && label}
+      </Badge>
     </Tooltip>
   );
 };

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

@@ -1,55 +1,51 @@
 import {
-  faCheck,
-  faExclamationTriangle,
-  faHourglass,
-  faRotate,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+  AlertTriangleIcon,
+  CheckIcon,
+  HourglassIcon,
+  LucideIcon,
+  RefreshCwIcon
+} from "lucide-react";
 
-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}>
-      <FontAwesomeIcon
-        icon={icon}
-        className={status === PkiSyncStatus.Running ? "animate-spin" : ""}
-      />
-      <span>{text}</span>
+    <Badge variant={variant}>
+      <Icon className={status === PkiSyncStatus.Running ? "animate-spin" : ""} />
+      {text}
     </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
-                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>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/secret-rotation/overview" />
             </div>
           )
         }

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

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
+import { DocumentationLinkBadge } from "@app/components/v3";
 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
-            target="_blank"
+          <DocumentationLinkBadge
             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"
-            className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          >
-            <FontAwesomeIcon icon={faXmark} />
-            Rotation Failed
-          </Badge>
-        </div>
+        <Badge variant="danger">
+          <XIcon />
+          Rotation Failed
+        </Badge>
       </Tooltip>
     );
   }
 
   if (!isAutoRotationEnabled) {
     return (
-      <Badge
-        className={twMerge(
-          "flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
-          className
-        )}
-      >
-        <FontAwesomeIcon icon={faBan} />
+      <Badge variant="neutral">
+        <BanIcon />
         Auto-Rotation Disabled
       </Badge>
     );
@@ -92,20 +81,12 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
         </>
       }
     >
-      <div>
-        <Badge
-          variant={daysToRotation >= 7 ? "success" : "primary"}
-          className={twMerge(
-            "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
-            className
-          )}
-        >
-          <FontAwesomeIcon icon={faRotate} />
-          {daysToRotation < 0
-            ? "Rotating"
-            : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
-        </Badge>
-      </div>
+      <Badge variant={daysToRotation >= 7 ? "info" : "warning"} className="capitalize">
+        <RefreshCwIcon />
+        {daysToRotation < 0
+          ? "Rotating"
+          : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
+      </Badge>
     </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">
-                    <FontAwesomeIcon icon={faKey} />
-                    <span>{name}</span>
+                  {/* TODO(scott): probably shouldn't be a badge */}
+                  <Badge variant="neutral" className="h-[36px] w-full justify-center text-xs">
+                    <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
-                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>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/secret-scanning/overview" />
             </div>
           )
         }

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

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
+import { DocumentationLinkBadge } from "@app/components/v3";
 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
-            target="_blank"
+          <DocumentationLinkBadge
             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
-            variant="danger"
-            className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          >
-            <FontAwesomeIcon icon={faXmark} />
+          <Badge variant="danger">
+            <XIcon />
             Scan Error
           </Badge>
         </div>
@@ -67,26 +65,17 @@ export const SecretScanningScanStatusBadge = ({
 
   if (status === SecretScanningScanStatus.Queued || status === SecretScanningScanStatus.Scanning) {
     return (
-      <Badge
-        className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-        variant="primary"
-      >
-        <FontAwesomeIcon icon={faArrowRotateForward} className="animate-spin" />
-        <span>Scanning</span>
+      <Badge variant="info">
+        <RotateCwIcon className="animate-spin" />
+        Scanning
       </Badge>
     );
   }
 
   return (
-    <Badge
-      variant="success"
-      className={twMerge(
-        "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
-        className
-      )}
-    >
-      <FontAwesomeIcon icon={faCheck} />
-      <span>Complete</span>
+    <Badge variant="success">
+      <CheckIcon />
+      Complete
     </Badge>
   );
 };

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

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
-  faCheck,
-  faDownload,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } 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 { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Tooltip } from "@app/components/v2";
+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
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          variant={variant}
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
+      <Badge isSquare={mini} variant={variant}>
+        <Icon />
+        {!mini && label}
+      </Badge>
     </Tooltip>
   );
 };

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

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
+import { DocumentationLinkBadge } from "@app/components/v3";
 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
-            target="_blank"
+          <DocumentationLinkBadge
             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 {
-  faCheck,
-  faEraser,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } 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 { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Tooltip } from "@app/components/v2";
+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
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          variant={variant}
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
+      <Badge isSquare={mini} variant={variant}>
+        <Icon />
+        {!mini && label}
+      </Badge>
     </Tooltip>
   );
 };

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

@@ -1,55 +1,51 @@
 import {
-  faCheck,
-  faExclamationTriangle,
-  faHourglass,
-  faRotate,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+  AlertTriangleIcon,
+  CheckIcon,
+  HourglassIcon,
+  LucideIcon,
+  RefreshCwIcon
+} from "lucide-react";
 
-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}>
-      <FontAwesomeIcon
-        icon={icon}
-        className={[SecretSyncStatus.Running].includes(status) ? "animate-spin" : ""}
-      />
-      <span>{text}</span>
+    <Badge variant={variant}>
+      <Icon className={[SecretSyncStatus.Running].includes(status) ? "animate-spin" : ""} />
+      {text}
     </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 {
-  Badge,
-  FilterableSelect,
-  FormControl,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
+import { FilterableSelect, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 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>{" "}
-    <Badge className="h-5 leading-5" variant="success">
-      {locationId}
-    </Badge>
+    <span>{displayName}</span> <Badge variant="info">{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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { EyeIcon } from "lucide-react";
 
 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">
-                <FontAwesomeIcon icon={faEye} />
-                <span>
-                  {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                </span>
+              <Badge variant="neutral">
+                <EyeIcon />
+                {tags.length} Tag{tags.length > 1 ? "s" : ""}
               </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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { EyeIcon } from "lucide-react";
 
 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">
-                <FontAwesomeIcon icon={faEye} />
-                <span>
-                  {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                </span>
+              <Badge variant="neutral">
+                <EyeIcon />
+                {tags.length} Tag{tags.length > 1 ? "s" : ""}
               </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 { 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";
@@ -224,7 +224,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>
@@ -235,7 +235,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 { faCube, faCubes, faGlobe, faServer } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createElement } from "react";
 import { ReactNode } from "@tanstack/react-router";
+import { LucideIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
-import { Badge } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import {
+  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 }> = {
-  org: { label: "Organization", icon: faGlobe },
-  [ProjectType.SecretManager]: { label: "Project", icon: faCube },
-  [ProjectType.CertificateManager]: { label: "Project", icon: faCube },
-  [ProjectType.SSH]: { label: "Project", icon: faCube },
-  [ProjectType.KMS]: { label: "Project", icon: faCube },
-  [ProjectType.PAM]: { label: "Project", icon: faCube },
-  [ProjectType.SecretScanning]: { label: "Project", icon: faCube },
-  namespace: { label: "Sub-Organization", icon: faCubes },
-  instance: { label: "Server", icon: faServer }
+const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: LucideIcon }> = {
+  org: { label: "Organization", icon: OrgIcon },
+  [ProjectType.SecretManager]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.CertificateManager]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.SSH]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.KMS]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.PAM]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.SecretScanning]: { label: "Project", icon: ProjectIcon },
+  namespace: { label: "Sub-Organization", icon: SubOrgIcon },
+  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",
-  instance: "instance"
+  namespace: "sub-org",
+  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:
-          "Use this variant when indicating informational states or linking to external references."
+        story: "Use this variant when indicating informational states."
       }
     }
   }
@@ -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",
-    "gap-x-1 [a&,button&]:cursor-pointer inline-flex",
-    "[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&>svg]:size-3",
+    "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 font-normal",
+    "[&>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",
-        success: "bg-success/30 text-success [a&,button&]:hover:bg-success/40",
-        info: "bg-info/30 text-info [a&,button&]:hover:bg-info/40",
-        warning: "bg-warning/30 text-warning [a&,button&]:hover:bg-warning/40",
-        danger: "bg-danger/30 text-danger [a&,button&]:hover:bg-danger/40",
-        project: "bg-project/30 text-project [a&,button&]:hover:bg-project/40",
-        org: "bg-org/30 text-org [a&,button&]:hover:bg-org/40",
-        "sub-org": "bg-sub-org/30 text-sub-org [a&,button&]:hover:bg-sub-org/40"
+        ghost: "text-mineshaft-200 gap-x-2",
+        neutral: "bg-neutral/25 text-neutral [a&,button&]:hover:bg-neutral/35",
+        success: "bg-success/25 text-success [a&,button&]:hover:bg-success/35",
+        info: "bg-info/25 text-info [a&,button&]:hover:bg-info/35",
+        warning: "bg-warning/25 text-warning [a&,button&]:hover:bg-warning/35",
+        danger: "bg-danger/25 text-danger [a&,button&]:hover:bg-danger/35",
+        project: "bg-project/25 text-project [a&,button&]:hover:bg-project/35",
+        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 { faArrowRightToBracket, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { LucideIcon, UserCheckIcon, UserPenIcon } from "lucide-react";
 
+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 {
-  faBan,
-  faCheck,
-  faMagnifyingGlassMinus,
-  faWarning
-} from "@fortawesome/free-solid-svg-icons";
+import { AlertTriangleIcon, BanIcon, CheckIcon, LucideIcon, SearchSlashIcon } from "lucide-react";
 
+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 = {
-  [SecretScanningFindingStatus.Resolved]: { icon: faCheck, className: "text-green" },
-  [SecretScanningFindingStatus.Unresolved]: { icon: faWarning, className: "text-yellow" },
-  [SecretScanningFindingStatus.Ignore]: { icon: faBan, className: "text-mineshaft-400" },
+export const SECRET_SCANNING_FINDING_STATUS_MAP: Record<
+  SecretScanningFindingStatus,
+  { Icon: LucideIcon; variant: TBadgeProps["variant"]; className: string }
+> = {
+  [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,
-    className: "text-mineshaft-400"
+    Icon: SearchSlashIcon,
+    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>
-                <FontAwesomeIcon icon={faServer} className="text-xs text-bunker-300" />
-              </div>
+              <InstanceIcon className="size-3.5 text-xs text-bunker-300" />
               <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 () => {
-                      navigate({
-                        to: "/organization/projects",
-                        search: (search) => ({ ...search, subOrganization: undefined })
-                      });
-                      if (isSubOrganization) {
-                        await router.invalidate({ sync: true }).catch(() => null);
-                      }
-                    }}
+                    asChild
                     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} />
-                    <p className="truncate">{currentOrg?.name}</p>
+                    <button
+                      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
-                      variant="namespace"
-                      className={twMerge(
-                        "flex max-w-full min-w-0 cursor-pointer text-sm",
-                        !isOrgScope &&
-                          "bg-transparent text-mineshaft-200 hover:bg-transparent hover:underline"
-                      )}
-                    >
-                      <FontAwesomeIcon icon={faCubes} />
-                      <p className="truncate">{currentOrg.subOrganization.name}</p>
-                    </Badge>
-                  </Link>
+                  <Badge
+                    asChild
+                    isTruncatable
+                    variant="sub-org"
+                    // TODO(scott): either add badge size/style variant or create designated component for namespace/org nav bar
+                    className={twMerge(
+                      "gap-x-1.5 text-sm",
+                      !isOrgScope &&
+                        "bg-transparent text-mineshaft-200 hover:!bg-transparent hover:underline [&>svg]:!text-sub-org"
+                    )}
+                  >
+                    <Link to="/organization/projects">
+                      <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">
-            <FontAwesomeIcon icon={faCube} />
-            <span>
-              {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
-            </span>
+          <Badge variant="project">
+            <ProjectIcon />
+            {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
           </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="primary"
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
-                            >
-                              <FontAwesomeIcon icon={faWarning} />
-                              <span>Deleting Yourself</span>
-                            </Badge>
-                          </div>
+                          <Badge variant="danger">
+                            <AlertTriangleIcon />
+                            Deleting Yourself
+                          </Badge>
                         </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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { RefreshCwIcon } from "lucide-react";
 
 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
-                variant="danger"
-                className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-              >
-                <FontAwesomeIcon icon={faRotate} className="animate-spin" />
+              <Badge variant="danger">
+                <RefreshCwIcon 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 {
@@ -132,12 +132,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 className="flex items-center gap-2" variant="primary">
-                  FIPS Mode: Enabled
-                  <FontAwesomeIcon icon={faInfoCircle} />
-                </Badge>
-              </div>
+              <Badge variant="info">
+                FIPS Mode: Enabled
+                <InfoIcon />
+              </Badge>
             </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
-              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>
+            <DocumentationLinkBadge href="https://infisical.com/docs/self-hosting/configuration/envars#environment-variable-overrides" />
           </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">
-                    <Badge className="flex w-fit max-w-full items-center gap-x-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
-                      <p className="truncate capitalize">{member.role.replace("-", " ")}</p>
-                      {Boolean(member.roleId) && (
-                        <Tooltip content="This member has a custom role assigned.">
-                          <FontAwesomeIcon icon={faCircleQuestion} className="w-3" />
-                        </Tooltip>
-                      )}
-                    </Badge>
+                  <Td>
+                    <div className="flex max-w-32">
+                      <Tooltip
+                        content={member.roleId ? "This member has a custom role assigned." : ""}
+                      >
+                        <Badge isTruncatable variant="neutral">
+                          <span className="capitalize">{member.role.replace("-", " ")}</span>
+                          {Boolean(member.roleId) && <CircleQuestionMarkIcon />}
+                        </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="primary"
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
-                            >
-                              <FontAwesomeIcon icon={faWarning} />
-                              <span>Deleting Yourself</span>
-                            </Badge>
-                          </div>
+                          <Badge variant="danger">
+                            <AlertTriangleIcon />
+                            Deleting Yourself
+                          </Badge>
                         </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

@@ -13,7 +13,6 @@ import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -30,6 +29,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionCertificateActions,
   ProjectPermissionSub,

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
-                className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-                variant="primary"
-              >
+              <Badge variant="warning">
                 <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 className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                  <FontAwesomeIcon icon={faBan} />
-                  {!syncStatus && "Auto-Sync Disabled"}
-                </Badge>
-              </div>
+              <Badge variant="neutral">
+                <BanIcon />
+                {!syncStatus && "Auto-Sync Disabled"}
+              </Badge>
             </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>
-              <a
-                href="https://infisical.com/docs/integrations/pki-syncs/overview"
-                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 className="flex items-center gap-x-2">
+                <p className="text-xl font-medium text-mineshaft-100">Certificate Syncs</p>
+                <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/pki/certificate-syncs/overview" />
+              </div>
             </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
-            variant="success"
-            className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-          >
-            <FontAwesomeIcon icon={faRotate} />
-            <span>Auto-Sync Enabled</span>
+          <Badge variant="info">
+            <RefreshCwIcon />
+            Auto-Sync Enabled
           </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 className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                <FontAwesomeIcon icon={faBan} />
-                <span>Auto-Sync Disabled</span>
-              </Badge>
-            </div>
+            <Badge variant="neutral">
+              <BanIcon />
+              Auto-Sync Disabled
+            </Badge>
           </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
-                    className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-                    variant="primary"
-                  >
-                    <FontAwesomeIcon icon={faTriangleExclamation} />
-                    <span>Source Deleted</span>
-                  </Badge>
-                </div>
+                <Badge variant="danger" className="mr-1">
+                  <AlertTriangleIcon />
+                  Source Deleted
+                </Badge>
               </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 (
-      <Badge variant="primary" className="text-xs">
-        No metrics
-      </Badge>
-    );
+    return <Badge variant="warning">No metrics</Badge>;
   }
 
   if (metrics.totalCertificates === 0) {
-    return (
-      <Badge variant="primary" className="text-xs">
-        No certificates
-      </Badge>
-    );
+    return <Badge variant="warning">No certificates</Badge>;
   }
 
   return (
     <>
       {metrics.activeCertificates > 0 && (
-        <Badge variant="success" className="text-xs">
-          {metrics.activeCertificates} active
-        </Badge>
+        <Badge variant="success">{metrics.activeCertificates} active</Badge>
       )}
       {metrics.expiringCertificates > 0 && (
-        <Badge variant="primary" className="text-xs">
-          {metrics.expiringCertificates} expiring
-        </Badge>
+        <Badge variant="warning">{metrics.expiringCertificates} expiring</Badge>
       )}
       {metrics.expiredCertificates > 0 && (
-        <Badge variant="danger" className="text-xs">
-          {metrics.expiredCertificates} expired
-        </Badge>
+        <Badge variant="danger">{metrics.expiredCertificates} expired</Badge>
       )}
       {metrics.revokedCertificates > 0 && (
-        <Badge variant="danger" className="text-xs">
-          {metrics.revokedCertificates} revoked
-        </Badge>
+        <Badge variant="danger">{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
-                content={
-                  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 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."
-                }
-              >
-                {signatureValid ? (
-                  <div className="flex items-center justify-center gap-2">
-                    <p>Valid</p>
-                  </div>
-                ) : (
-                  <div className="flex items-center justify-center gap-2">
-                    <p>Invalid</p>
-                  </div>
-                )}
-              </Tooltip>
-            </Badge>
+            <Tooltip
+              content={
+                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 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 ? "Valid" : "Invalid"}
+              </Badge>
+            </Tooltip>
           </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";
@@ -57,7 +58,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 {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faLink,
-  faPlus
-} from "@fortawesome/free-solid-svg-icons";
+import { 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
-                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>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/machine-identities" />
             </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
-                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>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/auth-templates" />
             </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="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
-                            >
-                              <FontAwesomeIcon icon={faBan} />
-                              <span>Ignored</span>
-                            </Badge>
-                          </div>
+                          <Badge variant="danger" className="ml-2">
+                            <BanIcon />
+                            Ignored
+                          </Badge>
                         </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,
@@ -519,17 +519,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">
-                              <span className="mr-1 hidden xl:inline">Server Admin</span>
-                              <Tooltip content="Server Admin">
-                                <FontAwesomeIcon className="xl:hidden" icon={faUserShield} />
-                              </Tooltip>
-                            </Badge>
+                            <Tooltip content="Server Admin">
+                              <Badge variant="info">
+                                <UserCogIcon />
+                                <span className="hidden xl:inline">Server Admin</span>
+                              </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">
-          {isSubOrganization ? "Sub-" : ""}Organization Roles
-        </p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">
+            {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="success" className="ml-1">
-                              Default
-                            </Badge>
-                          </div>
+                          <Badge variant="info">Default</Badge>
                         </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">
-                      {isCustomProjectRole(slug) ? "Custom" : "Default"}
+                    <Badge variant="ghost">
+                      {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">
-                  <FontAwesomeIcon icon={faServer} />
-                  <span>Platform Managed Credentials</span>
+                <Badge variant="info">
+                  <ServerIcon />
+                  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
-              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>
+            <DocumentationLinkBadge href="https://infisical.com/docs/integrations/app-connections/overview" />
           </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
-                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>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/audit-logs" />
             </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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
+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 className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                    <FontAwesomeIcon icon={faEye} />
-                    <span>Reveal</span>
-                  </Badge>
-                </div>
+                <Badge variant="neutral">
+                  <EyeIcon />
+                  Reveal
+                </Badge>
               </Tooltip>
             )}
           </IdentityAuthFieldDisplay>
@@ -103,12 +102,10 @@ export const ViewIdentityJwtAuthContent = ({
                     </p>
                   }
                 >
-                  <div className="inline-block w-min">
-                    <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                      <FontAwesomeIcon icon={faEye} />
-                      <span>Key {index + 1}</span>
-                    </Badge>
-                  </div>
+                  <Badge variant="neutral">
+                    <EyeIcon />
+                    Key {index + 1}
+                  </Badge>
                 </Tooltip>
               ))}
             </div>
@@ -138,12 +135,10 @@ export const ViewIdentityJwtAuthContent = ({
               </pre>
             }
           >
-            <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">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
+            <Badge variant="neutral">
+              <EyeIcon />
+              Reveal
+            </Badge>
           </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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
 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 className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
+            <Badge variant="neutral">
+              <EyeIcon />
+              Reveal
+            </Badge>
           </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 className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
+            <Badge variant="neutral">
+              <EyeIcon />
+              Reveal
+            </Badge>
           </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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
+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 className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-              <FontAwesomeIcon icon={faEye} />
-              <span>Reveal</span>
-            </Badge>
-          </div>
+          <Badge variant="neutral">
+            <EyeIcon />
+            Reveal
+          </Badge>
         </Tooltip>
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Search Base / DN">
@@ -95,12 +94,10 @@ export const ViewIdentityLdapAuthContent = ({
               </p>
             }
           >
-            <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">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
+            <Badge variant="neutral">
+              <EyeIcon />
+              Reveal
+            </Badge>
           </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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
+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 className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
+            <Badge variant="neutral">
+              <EyeIcon />
+              Reveal
+            </Badge>
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>
@@ -102,12 +101,10 @@ export const ViewIdentityOidcAuthContent = ({
               </pre>
             }
           >
-            <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">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
+            <Badge variant="neutral">
+              <EyeIcon />
+              Reveal
+            </Badge>
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>
@@ -122,12 +119,10 @@ export const ViewIdentityOidcAuthContent = ({
               </pre>
             }
           >
-            <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">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
+            <Badge variant="neutral">
+              <EyeIcon />
+              Reveal
+            </Badge>
           </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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
+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 className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-              <FontAwesomeIcon icon={faEye} />
-              <span>Reveal</span>
-            </Badge>
-          </div>
+          <Badge variant="neutral">
+            <EyeIcon />
+            Reveal
+          </Badge>
         </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
-              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>
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/gateways/overview" />
             <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
-              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>
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/gateways/relay-deployment" />
             <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">
-                  <FontAwesomeIcon icon={faCheck} className="mr-1" />
-                  <span>Joined</span>
+                <Badge variant="info">
+                  <CheckIcon />
+                  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
-            content={
-              row.accessType === SecretSharingAccessType.Anyone
-                ? "Anyone can input the secret."
-                : "Only members of the organization can input the secret."
-            }
-          >
-            <div>
-              {row.accessType === SecretSharingAccessType.Anyone
-                ? "Anyone"
-                : "Organization Members"}
-            </div>
-          </Tooltip>
-        </Badge>
+        <Tooltip
+          content={
+            row.accessType === SecretSharingAccessType.Anyone
+              ? "Anyone can input the secret."
+              : "Only members of the organization can input the secret."
+          }
+        >
+          <Badge variant="info">
+            {row.accessType === SecretSharingAccessType.Anyone ? "Anyone" : "Organization Members"}
+          </Badge>
+        </Tooltip>
       </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
-            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>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/audit-log-streams/audit-log-streams#example-providers" />
         </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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DocumentationLinkBadge } from "@app/components/v3";
 
 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
-            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>
+          <DocumentationLinkBadge href={`${docsBaseUrl}/${providerDetails.docsUrl}`} />
         </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
-                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>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/project-templates" />
               <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">
-              <FontAwesomeIcon icon={faBoxOpen} />
+            <Badge variant="neutral">
+              <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">
-                <FontAwesomeIcon icon={faFolder} />
+              <Badge variant="neutral">
+                <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">
-                <FontAwesomeIcon icon={faRotate} />
+              <Badge variant="info">
+                <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}`}