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

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

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 {
@@ -133,12 +133,10 @@ export const EncryptionPageForm = () => {
 
           {config.fipsEnabled && (
             <Tooltip content="FIPS mode of operation is enabled for your instance. All cryptographic operations within the FIPS boundaries are validated to be FIPS compliant.">
-              <div>
-                <Badge 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

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

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

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

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

@@ -1,7 +1,6 @@
 import { useCallback, useMemo } from "react";
 import { subject } from "@casl/ability";
 import {
-  faBan,
   faCalendarCheck,
   faCheck,
   faCopy,
@@ -19,6 +18,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";
+import { BanIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -29,7 +29,6 @@ import {
   PkiSyncStatusBadge
 } from "@app/components/pki-syncs";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -39,6 +38,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -172,10 +172,7 @@ export const PkiSyncRow = ({
         <Td>
           <Tooltip content="The PKI subscriber for this sync has been deleted. Configure a new source or remove this sync.">
             <div className="w-min">
-              <Badge
-                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";
@@ -58,7 +59,10 @@ export const OrgGroupsSection = () => {
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Groups</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Groups</p>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/groups" />
+        </div>
         <OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Button

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

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

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

@@ -1,15 +1,11 @@
-import {
-  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,
@@ -520,17 +520,17 @@ export const OrgMembersTable = ({
                       <Td
                         className={twMerge("group max-w-0", isActive ? "" : "text-mineshaft-400")}
                       >
-                        <div className="flex items-center">
+                        <div className="flex items-center gap-x-2">
                           <p className="truncate">
                             {name ?? <span className="text-mineshaft-400">Not Set</span>}
                           </p>
                           {u.superAdmin && (
-                            <Badge variant="primary" className="ml-2 w-min whitespace-nowrap">
-                              <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}`}

frontend/src/pages/pam/PamResourcesPage/components/PamResourceRow.tsx

@@ -4,7 +4,6 @@ import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -15,6 +14,7 @@ import {
   Tr
 } from "@app/components/v2";
 import { HighlightText } from "@app/components/v2/HighlightText";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { PAM_RESOURCE_TYPE_MAP, TPamResource } from "@app/hooks/api/pam";
 
@@ -40,7 +40,7 @@ export const PamResourceRow = ({ resource, onUpdate, onDelete, search }: Props)
           <span>
             <HighlightText text={name} highlight={search} />
           </span>
-          <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+          <Badge variant="neutral">
             <span>
               <HighlightText text={resourceTypeName} highlight={search} />
             </span>

frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx

@@ -1,7 +1,9 @@
-import { faBoxOpen, faCheck, faCopy, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PackageOpenIcon } from "lucide-react";
 
-import { Badge, IconButton, Tooltip } from "@app/components/v2";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useTimedReset } from "@app/hooks";
 import { PAM_RESOURCE_TYPE_MAP, TPamSession } from "@app/hooks/api/pam";
 
@@ -76,8 +78,8 @@ export const PamSessionDetailsSection = ({
               className="size-4"
             />
             <p>{accountName}</p>
-            <Badge className="flex h-5 w-min items-center gap-1.5 bg-yellow/20 whitespace-nowrap text-yellow">
-              <FontAwesomeIcon icon={faBoxOpen} />
+            <Badge variant="neutral">
+              <PackageOpenIcon />
               {resourceName}
             </Badge>
           </div>

frontend/src/pages/pam/PamSessionsPage/components/PamSessionStatusBadge.tsx

@@ -1,45 +1,38 @@
 import {
-  faBan,
-  faCircle,
-  faGavel,
-  faHourglass,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
+  ActivityIcon,
+  BanIcon,
+  ChevronsLeftRightEllipsisIcon,
+  GavelIcon,
+  LucideIcon
+} from "lucide-react";
 
-import { Badge } from "@app/components/v2";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { PamSessionStatus } from "@app/hooks/api/pam";
 
 interface StatusConfig {
-  bgColor: string;
-  textColor: string;
-  icon: IconDefinition;
-  iconClassName?: string;
+  variant: TBadgeProps["variant"];
+  icon: LucideIcon;
+  className?: string;
 }
 
 const PAM_SESSION_STATUS_CONFIG: Record<PamSessionStatus, StatusConfig> = {
   [PamSessionStatus.Active]: {
-    bgColor: "bg-green/20",
-    textColor: "text-green",
-    icon: faCircle,
-    iconClassName: "size-2 animate-pulse"
+    variant: "success",
+    icon: ActivityIcon,
+    className: "animate-pulse"
   },
   [PamSessionStatus.Terminated]: {
-    bgColor: "bg-red/20",
-    textColor: "text-red",
-    icon: faGavel
+    variant: "danger",
+    icon: GavelIcon
   },
   [PamSessionStatus.Starting]: {
-    bgColor: "bg-yellow/20",
-    textColor: "text-yellow",
-    icon: faHourglass,
-    iconClassName: "animate-spin"
+    variant: "info",
+    icon: ChevronsLeftRightEllipsisIcon,
+    className: "animate-pulse"
   },
   [PamSessionStatus.Ended]: {
-    bgColor: "bg-bunker-300/20",
-    textColor: "text-bunker-300",
-    icon: faBan
+    variant: "neutral",
+    icon: BanIcon
   }
 };
 
@@ -48,15 +41,11 @@ export const PamSessionStatusBadge = ({ status }: { status: PamSessionStatus })
 
   const displayName = status[0].toUpperCase() + status.slice(1);
 
+  const Icon = config.icon;
+
   return (
-    <Badge
-      className={twMerge(
-        "flex h-5 w-min items-center gap-1.5 whitespace-nowrap",
-        config.bgColor,
-        config.textColor
-      )}
-    >
-      <FontAwesomeIcon icon={config.icon} className={config.iconClassName} />
+    <Badge variant={config.variant} className={config.className}>
+      <Icon />
       {displayName}
     </Badge>
   );

frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx

@@ -5,6 +5,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -69,7 +70,10 @@ export const GroupsSection = () => {
   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">User Groups</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">User Groups</p>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/groups#user-groups" />
+        </div>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Groups}>
           {(isAllowed) => (
             <Button

frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx

@@ -2,8 +2,6 @@ import { subject } from "@casl/ability";
 import {
   faArrowDown,
   faArrowUp,
-  faArrowUpRightFromSquare,
-  faBookOpen,
   faCircleXmark,
   faClock,
   faEllipsisV,
@@ -44,6 +42,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
 import { getProjectBaseURL } from "@app/helpers/project";
 import { formatProjectRoleName } from "@app/helpers/roles";
@@ -159,22 +158,9 @@ export const IdentityTab = withProjectPermission(
     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">
-          <div className="flex items-center gap-1">
+          <div className="flex 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>
           <ProjectPermissionCan
             I={ProjectPermissionActions.Create}

frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/IdentityModal.tsx

@@ -2,7 +2,6 @@ import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { components, OptionProps } from "react-select";
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
-import { faGlobe } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Link } from "@tanstack/react-router";
@@ -10,7 +9,6 @@ import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import {
-  Badge,
   Button,
   FilterableSelect,
   FormControl,
@@ -19,6 +17,7 @@ import {
   ModalContent,
   Spinner
 } from "@app/components/v2";
+import { Badge, OrgIcon } from "@app/components/v3";
 import { useOrganization, useProject } from "@app/context";
 import {
   useAddIdentityToWorkspace,
@@ -50,9 +49,9 @@ const Option = ({
       <div className="flex flex-row items-center justify-between">
         <p className="truncate">{children}</p>
         {props.data.isManagedByRootOrg && (
-          <Badge variant="org" className="ml-auto cursor-pointer">
-            <FontAwesomeIcon icon={faGlobe} />
-            Managed by Root Org
+          <Badge variant="org" className="ml-auto">
+            <OrgIcon />
+            Organization
           </Badge>
         )}
         {isSelected && (

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx

@@ -5,6 +5,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -57,7 +58,10 @@ export const MembersSection = () => {
   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">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>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Member}>
           {(isAllowed) => (
             <Button

frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -13,12 +13,12 @@ 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 { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   Button,
   DeleteActionModal,
   DropdownMenu,
@@ -39,6 +39,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge, DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
 import { getProjectBaseURL } from "@app/helpers/project";
 import { isCustomProjectRole } from "@app/helpers/roles";
@@ -167,7 +168,10 @@ export const ProjectRoleList = () => {
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Project Roles</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Project Roles</p>
+          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/access-controls/role-based-access-controls#project-level-access-controls" />
+        </div>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Role}>
           {(isAllowed) => (
             <Button
@@ -261,8 +265,18 @@ export const ProjectRoleList = () => {
                   <Td>{name}</Td>
                   <Td>{slug}</Td>
                   <Td>
-                    <Badge className="w-min bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
-                      {isCustomProjectRole(slug) ? "Custom" : "Default"}
+                    <Badge variant="ghost">
+                      {isCustomProjectRole(slug) ? (
+                        <>
+                          <WrenchIcon />
+                          Custom
+                        </>
+                      ) : (
+                        <>
+                          <ServerIcon />
+                          Platform
+                        </>
+                      )}
                     </Badge>
                   </Td>
                   <Td>

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -1,10 +1,11 @@
 import { useTranslation } from "react-i18next";
-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 { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
@@ -50,22 +51,9 @@ export const ServiceTokenSection = withProjectPermission(
       <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>
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">Service Tokens</p>
-              <a
-                href="https://infisical.com/docs/documentation/platform/token"
-                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/token" />
             </div>
             <p className="text-sm text-bunker-300">
               {t("section.token.service-tokens-description")}

frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationRow.tsx

@@ -14,7 +14,8 @@ import { format } from "date-fns";
 import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-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 { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
 import { TCloudIntegration } from "@app/hooks/api/integrations/types";
 import { TIntegration } from "@app/hooks/api/types";
@@ -103,7 +104,7 @@ export const IntegrationRow = ({
       <Td>
         {" "}
         {typeof integration.isSynced !== "boolean" ? (
-          <Badge variant="primary" key={integration.id}>
+          <Badge variant="info" key={integration.id}>
             Pending Sync
           </Badge>
         ) : (

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncRow.tsx

@@ -13,12 +13,12 @@ import {
   faToggleOff,
   faToggleOn,
   faTrash,
-  faTriangleExclamation,
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";
+import { AlertTriangleIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -29,7 +29,6 @@ import {
   SecretSyncStatusBadge
 } from "@app/components/secret-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 { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -173,15 +173,10 @@ export const SecretSyncRow = ({
       ) : (
         <Td>
           <Tooltip content="The source location 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"
-              >
-                <FontAwesomeIcon icon={faTriangleExclamation} />
-                <span>Source Folder Deleted</span>
-              </Badge>
-            </div>
+            <Badge variant="danger">
+              <AlertTriangleIcon />
+              <span>Source Folder Deleted</span>
+            </Badge>
           </Tooltip>
         </Td>
       )}
@@ -237,7 +232,7 @@ export const SecretSyncRow = ({
               content="Auto-Sync is disabled. Changes to the source location 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">
+                <Badge variant="neutral">
                   <FontAwesomeIcon icon={faBan} />
                   {!syncStatus && "Auto-Sync Disabled"}
                 </Badge>

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx

@@ -1,5 +1,5 @@
 import { useEffect, 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 { useNavigate, useSearch } from "@tanstack/react-router";
 
@@ -7,6 +7,7 @@ import { ProjectPermissionCan } from "@app/components/permissions";
 import { CreateSecretSyncModal } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 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 { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -91,22 +92,9 @@ export const SecretSyncsTab = () => {
       <div className="w-full 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-start gap-1">
+            <div className="flex items-center gap-1.5">
               <p className="text-lg font-medium text-mineshaft-100">Secret Syncs</p>
-              <a
-                href="https://infisical.com/docs/integrations/secret-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>
+              <DocumentationLinkBadge href="https://infisical.com/docs/integrations/secret-syncs/overview" />
             </div>
             <p className="text-sm text-bunker-300">
               Use App Connections to sync secrets to third-party services.

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow/SecretOverviewSecretRotationRow.tsx

@@ -11,11 +11,13 @@ import {
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { XIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretRotationV2StatusBadge } from "@app/components/secret-rotations-v2/SecretRotationV2StatusBadge";
-import { Badge, IconButton, TableContainer, Tag, Td, Tooltip, Tr } from "@app/components/v2";
+import { IconButton, TableContainer, Tag, Td, Tooltip, Tr } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionSecretRotationActions,
   ProjectPermissionSub
@@ -70,15 +72,10 @@ export const SecretOverviewSecretRotationRow = ({
             <div className="flex-1">{secretRotationName}</div>
             {statuses?.some((status) => status === SecretRotationStatus.Failed) && (
               <Tooltip className="max-w-sm" content="One or more secrets failed to rotate.">
-                <div>
-                  <Badge
-                    variant="danger"
-                    className="flex h-5 w-min items-center gap-1 whitespace-nowrap"
-                  >
-                    <FontAwesomeIcon icon={faXmark} />
-                    <span>Rotation Failed</span>
-                  </Badge>
-                </div>
+                <Badge variant="danger">
+                  <XIcon />
+                  Rotation Failed
+                </Badge>
               </Tooltip>
             )}
           </div>

frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretItem.tsx

@@ -1,20 +1,18 @@
 import {
   faCheck,
   faChevronRight,
-  faCode,
   faCopy,
   faEye,
   faFolder,
-  faKey,
-  faTags
+  faKey
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
+import { CurlyBracesIcon, TagsIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -25,6 +23,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useProject } from "@app/context";
 import { reverseTruncate } from "@app/helpers/reverseTruncate";
 import { useTimedReset } from "@app/hooks";
@@ -135,15 +134,15 @@ export const QuickSearchSecretItem = ({
       <Td>
         <div className="flex w-full items-center justify-end gap-4">
           {tagMatch && (
-            <Badge variant="primary" className="flex items-center gap-1 whitespace-nowrap">
-              <FontAwesomeIcon size="xs" icon={faTags} />
+            <Badge variant="neutral">
+              <TagsIcon />
               {tagMatch.slug}
             </Badge>
           )}
           {metadataMatch && !tagMatch && (
-            <Badge variant="primary" className="flex items-center gap-1 whitespace-nowrap">
-              <FontAwesomeIcon size="xs" icon={faCode} />
-              <p className="truncate">Metadata Match</p>
+            <Badge variant="neutral">
+              <CurlyBracesIcon />
+              Metadata
             </Badge>
           )}
           {isSingleEnv ? (

frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx

@@ -2,7 +2,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { Badge } from "@app/components/v2/Badge";
+import { Badge } from "@app/components/v3";
 import { useProject } from "@app/context";
 import { useGetAccessRequestsCount, useGetSecretApprovalRequestCount } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/projects/types";
@@ -50,13 +50,17 @@ export const SecretApprovalsPage = () => {
             <Tab variant="project" value={TabSection.SecretApprovalRequests}>
               Change Requests
               {Boolean(secretApprovalReqCount?.open) && (
-                <Badge className="ml-2">{secretApprovalReqCount?.open}</Badge>
+                <Badge variant="warning" isSquare className="ml-2">
+                  {secretApprovalReqCount?.open}
+                </Badge>
               )}
             </Tab>
             <Tab variant="project" value={TabSection.ResourceApprovalRequests}>
               Access Requests
               {Boolean(accessApprovalRequestCount?.pendingCount) && (
-                <Badge className="ml-2">{accessApprovalRequestCount?.pendingCount}</Badge>
+                <Badge variant="warning" isSquare className="ml-2">
+                  {accessApprovalRequestCount?.pendingCount}
+                </Badge>
               )}
             </Tab>
             <Tab variant="project" value={TabSection.Policies}>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx

@@ -2,23 +2,18 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 import { useCallback, useMemo, useState } from "react";
 import {
-  faArrowUpRightFromSquare,
-  faBan,
-  faBookOpen,
   faCheck,
   faCheckCircle,
   faChevronDown,
-  faClipboardCheck,
   faLock,
   faMagnifyingGlass,
   faPlus,
   faSearch,
-  faStopwatch,
-  faUser,
-  IconDefinition
+  faUser
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format, formatDistance } from "date-fns";
+import { BanIcon, CheckIcon, ClipboardCheckIcon, LucideIcon, TimerIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -34,7 +29,7 @@ import {
   Pagination,
   Tooltip
 } from "@app/components/v2";
-import { Badge } from "@app/components/v2/Badge";
+import { Badge, DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionMemberActions,
   ProjectPermissionSub,
@@ -207,12 +202,12 @@ export const AccessApprovalRequest = ({
 
       let displayData: {
         label: string;
-        type: "primary" | "danger" | "success";
+        type: "warning" | "danger" | "success";
         tooltipContent?: string;
-        icon: IconDefinition | null;
+        icon: LucideIcon | null;
       } = {
         label: "",
-        type: "primary",
+        type: "warning",
         icon: null
       };
 
@@ -225,7 +220,7 @@ export const AccessApprovalRequest = ({
         displayData = {
           label: "Access Expired",
           type: "danger",
-          icon: faStopwatch,
+          icon: TimerIcon,
           tooltipContent: request.privilege?.temporaryAccessEndTime
             ? `Expired ${format(request.privilege.temporaryAccessEndTime, "M/d/yyyy h:mm aa")}`
             : undefined
@@ -234,27 +229,27 @@ export const AccessApprovalRequest = ({
         displayData = {
           label: "Access Granted",
           type: "success",
-          icon: faCheck,
+          icon: CheckIcon,
           tooltipContent: `Granted ${format(request.updatedAt, "M/d/yyyy h:mm aa")}`
         };
       else if (isRejectedByAnyone)
         displayData = {
           label: "Rejected",
           type: "danger",
-          icon: faBan,
+          icon: BanIcon,
           tooltipContent: `Rejected ${format(request.updatedAt, "M/d/yyyy h:mm aa")}`
         };
       else if (userReviewStatus === ApprovalStatus.APPROVED) {
         displayData = {
           label: "Pending Additional Reviews",
-          type: "primary",
-          icon: faClipboardCheck
+          type: "warning",
+          icon: ClipboardCheckIcon
         };
       } else if (!isReviewedByUser)
         displayData = {
           label: "Review Required",
-          type: "primary",
-          icon: faClipboardCheck
+          type: "warning",
+          icon: ClipboardCheckIcon
         };
 
       return {
@@ -301,22 +296,9 @@ export const AccessApprovalRequest = ({
       <div className="w-full 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-start gap-1">
+            <div className="flex items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
-              <a
-                href="https://infisical.com/docs/documentation/platform/access-controls/access-requests"
-                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/documentation/platform/access-controls/access-requests" />
             </div>
             <p className="text-sm text-bunker-300">
               Request and review access to secrets in sensitive environments and folders
@@ -476,6 +458,8 @@ export const AccessApprovalRequest = ({
             filteredRequests?.slice(offset, perPage * page).map((request) => {
               const details = generateRequestDetails(request);
 
+              const StatusIcon = details.displayData.icon;
+
               return (
                 <div
                   key={request.id}
@@ -489,7 +473,7 @@ export const AccessApprovalRequest = ({
                     }
                   }}
                 >
-                  <div className="flex w-full items-center justify-between">
+                  <div className="flex flex-1 items-center justify-between">
                     <div className="flex w-full flex-col justify-between">
                       <div className="mb-1 flex w-full items-center">
                         <FontAwesomeIcon
@@ -513,7 +497,7 @@ export const AccessApprovalRequest = ({
                         </div>
                       </div>
                     </div>
-                    <div className="flex items-center gap-3">
+                    <div className="flex shrink-0 items-center gap-3">
                       {request.requestedByUserId === user.id && (
                         <div className="flex items-center gap-1.5 text-xs whitespace-nowrap text-bunker-300">
                           <FontAwesomeIcon icon={faUser} size="sm" />
@@ -521,17 +505,10 @@ export const AccessApprovalRequest = ({
                         </div>
                       )}
                       <Tooltip content={details.displayData.tooltipContent}>
-                        <div>
-                          <Badge
-                            className="flex items-center gap-1.5 whitespace-nowrap"
-                            variant={details.displayData.type}
-                          >
-                            {details.displayData.icon && (
-                              <FontAwesomeIcon icon={details.displayData.icon} />
-                            )}
-                            <span>{details.displayData.label}</span>
-                          </Badge>
-                        </div>
+                        <Badge variant={details.displayData.type}>
+                          {StatusIcon && <StatusIcon />}
+                          {details.displayData.label}
+                        </Badge>
                       </Tooltip>
                     </div>
                   </div>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx

@@ -9,6 +9,7 @@ import {
   faUserSlash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { BanIcon, CheckIcon, HourglassIcon } from "lucide-react";
 import ms from "ms";
 import { twMerge } from "tailwind-merge";
 
@@ -24,7 +25,7 @@ import {
   ModalContent,
   Tooltip
 } from "@app/components/v2";
-import { Badge } from "@app/components/v2/Badge";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionActions, useProject, useUser } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useListWorkspaceGroups, useReviewAccessRequest } from "@app/hooks/api";
@@ -42,13 +43,13 @@ import { EditAccessRequestModal } from "@app/pages/secret-manager/SecretApproval
 const getReviewedStatusSymbol = (status?: ApprovalStatus, isOrgMembershipActive?: boolean) => {
   if (status === ApprovalStatus.APPROVED)
     return (
-      <Badge variant="success" className="flex h-4 items-center justify-center">
+      <Badge variant="success">
         <FontAwesomeIcon icon={faCheck} size="xs" />
       </Badge>
     );
   if (status === ApprovalStatus.REJECTED)
     return (
-      <Badge variant="danger" className="flex h-4 items-center justify-center">
+      <Badge variant="danger">
         <FontAwesomeIcon icon={faBan} size="xs" />
       </Badge>
     );
@@ -58,13 +59,13 @@ const getReviewedStatusSymbol = (status?: ApprovalStatus, isOrgMembershipActive?
       // Can't do a tooltip here because nested tooltips doesn't work properly as of yet.
       // TODO(daniel): Fix nested tooltips in the future.
 
-      <Badge className="flex h-4 items-center justify-center bg-mineshaft-400/50 text-bunker-300">
+      <Badge variant="neutral">
         <FontAwesomeIcon size="xs" icon={faUserSlash} />
       </Badge>
     );
   }
   return (
-    <Badge variant="primary" className="flex h-4 items-center justify-center">
+    <Badge variant="warning">
       <FontAwesomeIcon icon={faHourglass} size="xs" />
     </Badge>
   );
@@ -346,9 +347,7 @@ export const ReviewAccessRequestModal = ({
             <span>Approvers</span>
             {approverSequence.isMyReviewInThisSequence &&
               request.status === ApprovalStatus.PENDING && (
-                <Badge variant="primary" className="h-min">
-                  Awaiting Your Review
-                </Badge>
+                <Badge variant="warning">Awaiting Your Review</Badge>
               )}
           </div>
           <div className="max-h-[40vh] thin-scrollbar overflow-y-auto rounded-sm py-2">
@@ -364,43 +363,28 @@ export const ReviewAccessRequestModal = ({
                 let BadgeComponent: ReactNode = null;
                 if (approver.hasRejected) {
                   StepComponent = (
-                    <Badge
-                      variant="danger"
-                      className="flex h-6 min-w-6 items-center justify-center"
-                    >
-                      <FontAwesomeIcon icon={faBan} />
+                    <Badge isSquare variant="danger">
+                      <BanIcon />
                     </Badge>
                   );
                   BadgeComponent = <Badge variant="danger">Rejected</Badge>;
                 } else if (approver.hasApproved) {
                   StepComponent = (
-                    <Badge
-                      variant="success"
-                      className="flex h-6 min-w-6 items-center justify-center"
-                    >
-                      <FontAwesomeIcon icon={faCheck} />
+                    <Badge isSquare variant="success">
+                      <CheckIcon />
                     </Badge>
                   );
                   BadgeComponent = <Badge variant="success">Approved</Badge>;
                 } else if (isPending) {
                   StepComponent = (
-                    <Badge
-                      variant="primary"
-                      className="flex h-6 min-w-6 items-center justify-center"
-                    >
-                      <FontAwesomeIcon icon={faHourglass} />
+                    <Badge isSquare variant="warning">
+                      <HourglassIcon />
                     </Badge>
                   );
-                  BadgeComponent = <Badge variant="primary">Pending</Badge>;
+                  BadgeComponent = <Badge variant="warning">Pending</Badge>;
                 } else {
                   StepComponent = (
-                    <Badge
-                      className={
-                        isInactive
-                          ? "py-auto my-auto flex h-6 min-w-6 items-center justify-center gap-1.5 bg-mineshaft-400/50 text-center whitespace-nowrap text-bunker-200"
-                          : ""
-                      }
-                    >
+                    <Badge isSquare variant="neutral">
                       <span>{index + 1}</span>
                     </Badge>
                   );
@@ -447,12 +431,10 @@ export const ReviewAccessRequestModal = ({
                                     {member.user.username}
                                     <span className="text-xs">
                                       <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
-                                        <div>
-                                          <Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                                            <FontAwesomeIcon icon={faBan} />
-                                            Inactive
-                                          </Badge>
-                                        </div>
+                                        <Badge variant="neutral">
+                                          <BanIcon />
+                                          Inactive
+                                        </Badge>
                                       </Tooltip>
                                     </span>
                                   </span>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx

@@ -2,8 +2,6 @@ import { useMemo, useState } from "react";
 import {
   faArrowDown,
   faArrowUp,
-  faArrowUpRightFromSquare,
-  faBookOpen,
   faCheckCircle,
   faFileShield,
   faFilter,
@@ -36,6 +34,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   ProjectPermissionSub,
   TProjectPermission,
@@ -243,22 +242,9 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
       <div className="w-full 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-start gap-1">
+            <div className="flex items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">Policies</p>
-              <a
-                href="https://infisical.com/docs/documentation/platform/pr-workflows"
-                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/documentation/platform/pr-workflows" />
             </div>
             <p className="text-sm text-bunker-300">
               Implement granular policies for access requests and secrets management

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import {
-  faBan,
   faClipboardCheck,
   faEdit,
   faEllipsisV,
@@ -9,6 +8,7 @@ import {
   faUserGroup
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { BanIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
@@ -23,7 +23,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { Badge } from "@app/components/v2/Badge";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionActions } from "@app/context/ProjectPermissionContext/types";
 import { getMemberLabel } from "@app/helpers/members";
@@ -100,6 +100,8 @@ export const ApprovalPolicyRow = ({
     });
   }, [policy, members, groups]);
 
+  const { variant, Icon } = policyDetails[policy.policyType];
+
   return (
     <>
       <Tr
@@ -116,13 +118,8 @@ export const ApprovalPolicyRow = ({
         <Td>{policy.environments.map((env) => env.name).join(", ")}</Td>
         <Td>{policy.secretPath || "*"}</Td>
         <Td>
-          <Badge
-            className={twMerge(
-              policyDetails[policy.policyType].className,
-              "flex w-min items-center gap-1.5 whitespace-nowrap"
-            )}
-          >
-            <FontAwesomeIcon icon={policyDetails[policy.policyType].icon} />
+          <Badge variant={variant}>
+            <Icon />
             <span>{policyDetails[policy.policyType].name}</span>
           </Badge>
         </Td>
@@ -196,7 +193,7 @@ export const ApprovalPolicyRow = ({
                         className={twMerge("grow border-mineshaft-600", index !== 0 && "border-r")}
                       />
                       {labels.length > 1 && (
-                        <Badge className="my-auto flex h-5 w-min min-w-5 items-center justify-center gap-1.5 bg-mineshaft-400/50 text-center whitespace-nowrap text-bunker-200">
+                        <Badge variant="neutral">
                           <span>{index + 1}</span>
                         </Badge>
                       )}
@@ -225,8 +222,8 @@ export const ApprovalPolicyRow = ({
                                   <span className="text-xs">
                                     <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
                                       <div>
-                                        <Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                                          <FontAwesomeIcon icon={faBan} />
+                                        <Badge variant="neutral">
+                                          <BanIcon />
                                           Inactive
                                         </Badge>
                                       </div>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyMemberOption.tsx

@@ -1,10 +1,10 @@
 import { components, OptionProps } from "react-select";
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
-import { faBan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { BanIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
-import { Badge } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { BypasserType } from "@app/hooks/api/accessApproval/types";
 import { ApproverType } from "@app/hooks/api/secretApproval/types";
 
@@ -26,8 +26,8 @@ export const PolicyMemberOption = ({
           {children}
         </p>
         {!props.data.isOrgMembershipActive && (
-          <Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-            <FontAwesomeIcon icon={faBan} />
+          <Badge className="ml-auto" variant="neutral">
+            <BanIcon />
             Inactive
           </Badge>
         )}

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx

@@ -1,23 +1,19 @@
 import { useEffect, useState } from "react";
 import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
   faCheck,
   faCheckCircle,
   faChevronDown,
   faCodeBranch,
-  faCodeMerge,
   faMagnifyingGlass,
-  faSearch,
-  faXmark
+  faSearch
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSearch } from "@tanstack/react-router";
 import { format, formatDistance } from "date-fns";
+import { GitMergeIcon, XIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -30,6 +26,7 @@ import {
   Skeleton,
   Tooltip
 } from "@app/components/v2";
+import { Badge, DocumentationLinkBadge } from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
   ProjectPermissionMemberActions,
@@ -139,22 +136,9 @@ export const SecretApprovalRequest = () => {
     <div className="w-full 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-start gap-1">
+          <div className="flex items-center gap-x-2">
             <p className="text-xl font-medium text-mineshaft-100">Change Requests</p>
-            <a
-              href="https://infisical.com/docs/documentation/platform/pr-workflows"
-              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/documentation/platform/pr-workflows" />
           </div>
           <p className="text-sm text-bunker-300">Review pending and closed change requests</p>
         </div>
@@ -329,12 +313,18 @@ export const SecretApprovalRequest = () => {
               {status === "close" && (
                 <Tooltip content={updatedAt ? format(new Date(updatedAt), "M/dd/yyyy h:mm a") : ""}>
                   <div className="my-auto ml-auto">
-                    <Badge
-                      variant={hasMerged ? "success" : "danger"}
-                      className="flex h-min items-center gap-1"
-                    >
-                      <FontAwesomeIcon icon={hasMerged ? faCodeMerge : faXmark} />
-                      {hasMerged ? "Merged" : "Rejected"}
+                    <Badge variant={hasMerged ? "success" : "danger"}>
+                      {hasMerged ? (
+                        <>
+                          <GitMergeIcon />
+                          Merged
+                        </>
+                      ) : (
+                        <>
+                          <XIcon />
+                          Rejected
+                        </>
+                      )}
                     </Badge>
                   </div>
                 </Tooltip>

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -33,7 +33,6 @@ import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { CreateSecretRotationV2Modal } from "@app/components/secret-rotations-v2";
 import {
-  Badge,
   Button,
   DeleteActionModal,
   DropdownMenu,
@@ -51,6 +50,7 @@ import {
   ModalContent,
   Tooltip
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionActions,
   ProjectPermissionDynamicSecretActions,
@@ -829,7 +829,9 @@ export const ActionBar = ({
                   >
                     <div className="flex w-full justify-between">
                       <span>Tags</span>
-                      {Boolean(filteredTags) && <Badge>{filteredTags} Applied</Badge>}
+                      {Boolean(filteredTags) && (
+                        <Badge variant="info">{filteredTags} Applied</Badge>
+                      )}
                     </div>
                   </DropdownSubMenuTrigger>
                   <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -13,16 +13,12 @@ import {
 } from "react-icons/si";
 import { VscAzure } from "react-icons/vsc";
 import { faAws, faGithub, faGoogle } from "@fortawesome/free-brands-svg-icons";
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faClock,
-  faDatabase
-} from "@fortawesome/free-solid-svg-icons";
+import { faClock, faDatabase } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AnimatePresence, motion } from "framer-motion";
 
 import { Modal, ModalContent } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { ProjectEnv } from "@app/hooks/api/types";
 
@@ -202,23 +198,11 @@ export const CreateDynamicSecretForm = ({
     <Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
       <ModalContent
         title={
-          <div className="flex items-center">
+          <div className="flex items-center gap-x-2">
             <span>{modalTitle ? `${modalTitle} Dynamic Secret` : "Dynamic Secrets"} </span>
-            <a
+            <DocumentationLinkBadge
               href={`https://infisical.com/docs/documentation/platform/dynamic-secrets/${selectedProvider ? (UniqueLinks[selectedProvider] ?? selectedProvider) : "overview"}`}
-              target="_blank"
-              className="mb-0.5 ml-1.5"
-              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>
         }
         subTitle="Configure dynamic secret parameters"
@@ -234,11 +218,11 @@ export const CreateDynamicSecretForm = ({
               exit={{ opacity: 0, translateX: -30 }}
             >
               <div className="mb-4 text-mineshaft-300">Select a service to connect to:</div>
-              <div className="flex flex-wrap items-center gap-4">
+              <div className="grid grid-cols-4 gap-2">
                 {DYNAMIC_SECRET_LIST.map(({ icon, provider, title }) => (
                   <div
                     key={`dynamic-secret-provider-${provider}`}
-                    className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    className="flex h-30 w-42 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
                     role="button"
                     tabIndex={0}
                     onClick={() => {

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ReplicateFolderFromBoard/ReplicateFolderFromBoard.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faArrowUpRightFromSquare, faBookOpen, faClone } from "@fortawesome/free-solid-svg-icons";
+import { faClone } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -14,6 +14,7 @@ import {
   Switch
 } from "@app/components/v2";
 import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { useDebounce } from "@app/hooks";
 import { useGetAccessibleSecrets } from "@app/hooks/api/dashboard";
@@ -227,23 +228,9 @@ export const ReplicateFolderFromBoard = ({
         bodyClassName="overflow-visible"
         className="max-w-2xl"
         title={
-          <div className="flex items-center gap-1 text-mineshaft-300">
+          <div className="flex items-center gap-x-2 text-mineshaft-300">
             <span>Replicate Secrets</span>
-            <a
-              target="_blank"
-              href="https://infisical.com/docs/documentation/platform/folder#replicating-folder-contents"
-              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/folder#replicating-folder-contents" />
           </div>
         }
         subTitle="Copy folder contents from other locations into this context"

frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx

@@ -1,16 +1,12 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useCallback, useState } from "react";
-import {
-  faClipboardCheck,
-  faCodeCommit,
-  faFolder,
-  faKey,
-  faSave
-} from "@fortawesome/free-solid-svg-icons";
+import { faCodeCommit, faFolder, faKey, faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AnimatePresence, motion } from "framer-motion";
+import { ClipboardCheckIcon } from "lucide-react";
 
-import { Badge, Button, Input, Modal, ModalContent } from "@app/components/v2";
+import { Button, Input, Modal, ModalContent } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
 import { SecretVersionDiffView } from "@app/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView";
 import { HIDDEN_SECRET_VALUE_API_MASK } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem";
@@ -329,9 +325,9 @@ export const CommitForm: React.FC<CommitFormProps> = ({
                   <div className="flex-1">
                     {/* Header */}
                     <div className="flex items-center gap-2">
-                      <div className="h-2 w-2 rounded-full bg-yellow-500" />
+                      <div className="h-2 w-2 rounded-full bg-warning" />
                       <span className="font-medium text-mineshaft-100">Pending Changes</span>
-                      <Badge variant="primary" className="text-xs">
+                      <Badge variant="warning">
                         {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
                       </Badge>
                     </div>
@@ -375,9 +371,9 @@ export const CommitForm: React.FC<CommitFormProps> = ({
         <ModalContent
           title={
             <div className="flex items-center gap-2">
-              <FontAwesomeIcon icon={faClipboardCheck} className="text-mineshaft-400" />
               Review Changes
-              <Badge variant="primary" className="mt-[0.05rem]">
+              <Badge variant="warning">
+                <ClipboardCheckIcon />
                 {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
               </Badge>
             </div>

frontend/src/pages/secret-manager/SecretDashboardPage/components/CompareEnvironments/CompareEnvironments.tsx

@@ -9,14 +9,13 @@ import {
   faFolder,
   faKey,
   faRotate,
-  faSearch,
-  faWarning
+  faSearch
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AlertTriangleIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -38,6 +37,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useProject } from "@app/context";
 import {
   getUserTablePreference,
@@ -396,11 +396,8 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
                                 </>
                               }
                             >
-                              <Badge
-                                variant="primary"
-                                className="-mt-[0.05rem] flex h-4 items-center gap-x-1 pt-[0.1rem] leading-3 font-normal"
-                              >
-                                <FontAwesomeIcon icon={faWarning} className="-mt-[0.1rem] w-2.5" />
+                              <Badge variant="warning">
+                                <AlertTriangleIcon />
                                 {missingKeyCount}
                               </Badge>
                             </Tooltip>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/SecretDropzone.tsx

@@ -1,15 +1,9 @@
 import { ChangeEvent, Dispatch, DragEvent, SetStateAction, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { subject } from "@casl/ability";
-import {
-  faArrowRight,
-  faAsterisk,
-  faComment,
-  faKey,
-  faPlus,
-  faUpload
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AsteriskIcon, KeyIcon, MessageSquareIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -22,7 +16,6 @@ import {
   parseYaml
 } from "@app/components/utilities/parseSecrets";
 import {
-  Badge,
   Button,
   FormLabel,
   Lottie,
@@ -31,6 +24,7 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
@@ -115,23 +109,23 @@ const MatrixImportModalTableRow = ({
       </td>
       <td className="whitespace-nowrap">
         <div className="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">
+          <Badge isFullWidth variant="neutral">
             {mapKey === "key" && (
               <>
-                <FontAwesomeIcon icon={faKey} />
-                <span>Secret Key</span>
+                <KeyIcon />
+                Secret Key
               </>
             )}
             {mapKey === "value" && (
               <>
-                <FontAwesomeIcon icon={faAsterisk} />
-                <span>Secret Value</span>
+                <AsteriskIcon />
+                Secret Value
               </>
             )}
             {mapKey === "comment" && (
               <>
-                <FontAwesomeIcon icon={faComment} />
-                <span>Comment</span>
+                <MessageSquareIcon />
+                Comment
               </>
             )}
           </Badge>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView/SecretRotationItem.tsx

@@ -67,10 +67,10 @@ export const SecretRotationItem = ({
               </Tooltip>
             )}
           </div>
-          <SecretRotationV2StatusBadge className="mx-2" secretRotation={secretRotation} />
+          <SecretRotationV2StatusBadge secretRotation={secretRotation} />
           <div
             key="actions"
-            className="flex h-full shrink-0 self-start transition-all group-hover:gap-x-2"
+            className="ml-2 flex h-full shrink-0 self-start transition-all group-hover:gap-x-2"
           >
             <Tooltip content="View Rotation Secrets">
               <IconButton

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.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 {
   SecretSyncRemoveStatusBadge
 } from "@app/components/secret-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 { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -143,24 +143,19 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
         <SecretSyncImportStatusBadge secretSync={secretSync} />
         <SecretSyncRemoveStatusBadge secretSync={secretSync} />
         {secretSync.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. Changes to the source location 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/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/AwsParameterStoreSyncDestinationSection.tsx

@@ -1,5 +1,5 @@
 import { GenericFieldLabel } from "@app/components/secret-syncs";
-import { Badge } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import { TAwsParameterStoreSync } from "@app/hooks/api/secretSyncs/types/aws-parameter-store-sync";
 
@@ -18,8 +18,8 @@ export const AwsParameterStoreSyncDestinationSection = ({ secretSync }: Props) =
     <>
       <GenericFieldLabel label="Region">
         {awsRegion?.name}
-        <Badge className="ml-1" variant="success">
-          {awsRegion?.slug}{" "}
+        <Badge className="ml-1" variant="neutral">
+          {awsRegion?.slug}
         </Badge>
       </GenericFieldLabel>
       <GenericFieldLabel label="Path">{path}</GenericFieldLabel>

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/AwsSecretsManagerSyncDestinationSection.tsx

@@ -1,5 +1,5 @@
 import { GenericFieldLabel } from "@app/components/secret-syncs";
-import { Badge } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import {
   AwsSecretsManagerSyncMappingBehavior,
@@ -19,8 +19,8 @@ export const AwsSecretsManagerSyncDestinationSection = ({ secretSync }: Props) =
     <>
       <GenericFieldLabel label="Region">
         {awsRegion?.name}
-        <Badge className="ml-1" variant="success">
-          {awsRegion?.slug}{" "}
+        <Badge className="ml-1" variant="neutral">
+          {awsRegion?.slug}
         </Badge>
       </GenericFieldLabel>
       <GenericFieldLabel label="Mapping Behavior" className="capitalize">

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsParameterStoreSyncOptionsSection.tsx

@@ -1,8 +1,8 @@
-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 { 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 { TAwsParameterStoreSync } from "@app/hooks/api/secretSyncs/types/aws-parameter-store-sync";
 
 type Props = {
@@ -40,11 +40,9 @@ export const AwsParameterStoreSyncOptionsSection = ({ secretSync }: Props) => {
             }
           >
             <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/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/AwsSecretsManagerSyncOptionsSection.tsx

@@ -1,8 +1,10 @@
 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 { 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 { TAwsSecretsManagerSync } from "@app/hooks/api/secretSyncs/types/aws-secrets-manager-sync";
 
 type Props = {
@@ -40,11 +42,10 @@ export const AwsSecretsManagerSyncOptionsSection = ({ secretSync }: Props) => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
+              <Badge variant="neutral">
+                <EyeIcon />
                 <FontAwesomeIcon icon={faEye} />
-                <span>
-                  {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                </span>
+                {tags.length} Tag{tags.length > 1 ? "s" : ""}
               </Badge>
             </div>
           </Tooltip>

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/RenderSyncOptionsSection.tsx

@@ -1,5 +1,5 @@
 import { GenericFieldLabel } from "@app/components/secret-syncs";
-import { Badge } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { TRenderSync } from "@app/hooks/api/secretSyncs/types/render-sync";
 
 type Props = {

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx

@@ -5,7 +5,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 { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP } from "@app/helpers/secretSyncs";
@@ -114,7 +115,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
             {AdditionalSyncOptionsComponent}
             {disableSecretDeletion && (
               <GenericFieldLabel label="Secret Deletion">
-                <Badge variant="primary">Disabled</Badge>
+                <Badge variant="neutral">Disabled</Badge>
               </GenericFieldLabel>
             )}
           </div>

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncSourceSection.tsx

@@ -1,10 +1,12 @@
 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 { GenericFieldLabel } from "@app/components/secret-syncs";
-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 { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { TSecretSync } from "@app/hooks/api/secretSyncs";
@@ -34,12 +36,9 @@ export const SecretSyncSourceSection = ({ secretSync, onEditSource }: Props) =>
             {(!folder || !environment) && (
               <Tooltip content="The source location 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>Folder Deleted</span>
+                  <Badge variant="danger">
+                    <AlertTriangleIcon />
+                    Folder Deleted
                   </Badge>
                 </div>
               </Tooltip>

frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx

@@ -2,11 +2,11 @@
 import { BsMicrosoftTeams } from "react-icons/bs";
 import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { BanIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -15,6 +15,7 @@ import {
   Td,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { useGetMicrosoftTeamsIntegrationTeams } from "@app/hooks/api";
 import {
@@ -66,30 +67,36 @@ export const MicrosoftTeamsConfigRow = ({
         {microsoftTeamsConfig.isAccessRequestNotificationEnabled &&
         !isLoadingConfig &&
         microsoftTeamsConfig.accessRequestChannels?.channelIds?.length > 0 ? (
-          <Badge>
+          <p>
             {microsoftTeamsConfig.accessRequestChannels.channelIds
               .map((channel) => microsoftTeamsChannelIdToName[channel])
               .join(", ")}
-          </Badge>
+          </p>
         ) : isLoadingConfig ? (
           <Spinner size="xs" />
         ) : (
-          <Badge variant="danger">Disabled</Badge>
+          <Badge variant="neutral">
+            <BanIcon />
+            Disabled
+          </Badge>
         )}
       </Td>
       <Td>
         {microsoftTeamsConfig.isSecretRequestNotificationEnabled &&
         !isLoadingConfig &&
         microsoftTeamsConfig.secretRequestChannels?.channelIds?.length > 0 ? (
-          <Badge>
+          <p>
             {microsoftTeamsConfig.secretRequestChannels.channelIds
               .map((channel) => microsoftTeamsChannelIdToName[channel])
               .join(", ")}
-          </Badge>
+          </p>
         ) : isLoadingConfig ? (
           <Spinner size="xs" />
         ) : (
-          <Badge variant="danger">Disabled</Badge>
+          <Badge variant="neutral">
+            <BanIcon />
+            Disabled
+          </Badge>
         )}
       </Td>
 

frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx

@@ -2,11 +2,11 @@
 import { BsSlack } from "react-icons/bs";
 import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { BanIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -15,6 +15,7 @@ import {
   Td,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { useGetSlackIntegrationChannels } from "@app/hooks/api";
 import {
@@ -61,32 +62,38 @@ export const SlackConfigRow = ({ handlePopUpOpen, isSlackConfigLoading, slackCon
         {slackConfig.isAccessRequestNotificationEnabled &&
         !isLoadingConfig &&
         slackConfig.accessRequestChannels.length > 0 ? (
-          <Badge>
+          <p>
             {slackConfig.accessRequestChannels
               .split(", ")
               .map((channel) => slackChannelIdToName[channel])
               .join(", ")}
-          </Badge>
+          </p>
         ) : isLoadingConfig ? (
           <Spinner size="xs" />
         ) : (
-          <Badge variant="danger">Disabled</Badge>
+          <Badge variant="neutral">
+            <BanIcon />
+            Disabled
+          </Badge>
         )}
       </Td>
       <Td>
         {slackConfig.isSecretRequestNotificationEnabled &&
         !isLoadingConfig &&
         slackConfig.secretRequestChannels.length > 0 ? (
-          <Badge>
+          <p>
             {slackConfig.secretRequestChannels
               .split(", ")
               .map((channel) => slackChannelIdToName[channel])
               .join(", ")}
-          </Badge>
+          </p>
         ) : isLoadingConfig ? (
           <Spinner size="xs" />
         ) : (
-          <Badge variant="danger">Disabled</Badge>
+          <Badge variant="neutral">
+            <BanIcon />
+            Disabled
+          </Badge>
         )}
       </Td>
 

frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/AwsParamterStoreConfigurePage.tsx

@@ -11,7 +11,6 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
 import {
-  Badge,
   Button,
   Card,
   CardTitle,
@@ -25,6 +24,7 @@ import {
   TabPanel,
   Tabs
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { useProject } from "@app/context";
 import { useCreateIntegration } from "@app/hooks/api";
@@ -254,7 +254,7 @@ export const AWSParameterStoreConfigurePage = () => {
                 >
                   {awsRegions.map((awsRegion) => (
                     <SelectItem value={awsRegion.slug} key={`aws-environment-${awsRegion.slug}`}>
-                      {awsRegion.name} <Badge variant="success">{awsRegion.slug}</Badge>
+                      {awsRegion.name} <Badge variant="neutral">{awsRegion.slug}</Badge>
                     </SelectItem>
                   ))}
                 </Select>

frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/AwsSecretManagerConfigurePage.tsx

@@ -14,7 +14,6 @@ import { motion } from "framer-motion";
 import z from "zod";
 
 import {
-  Badge,
   Button,
   Card,
   CardTitle,
@@ -29,6 +28,7 @@ import {
   Tabs
 } from "@app/components/v2";
 import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { Badge } from "@app/components/v3";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { useProject } from "@app/context";
 import { useCreateIntegration } from "@app/hooks/api";
@@ -332,7 +332,7 @@ export const AwsSecretManagerConfigurePage = () => {
                             className="flex w-full justify-between"
                             key={`aws-environment-${awsRegion.slug}`}
                           >
-                            {awsRegion.name} <Badge variant="success">{awsRegion.slug}</Badge>
+                            {awsRegion.name} <Badge variant="neutral">{awsRegion.slug}</Badge>
                           </SelectItem>
                         ))}
                       </Select>

frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningDataSourceSection.tsx

@@ -1,10 +1,12 @@
-import { faBan, faCheck, faEdit, faPlugCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { BanIcon, CheckIcon, UnplugIcon } from "lucide-react";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { EditSecretScanningDataSourceModal } from "@app/components/secret-scanning";
 import { GenericFieldLabel } from "@app/components/secret-syncs";
-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 { ProjectPermissionSecretScanningDataSourceActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
@@ -33,12 +35,9 @@ export const SecretScanningDataSourceSection = ({ dataSource }: Props) => {
                 content="The external data source has been removed and can no longer be scanned. Delete this data source and re-initialize the connection."
               >
                 <div className="ml-auto">
-                  <Badge
-                    variant="danger"
-                    className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-                  >
-                    <FontAwesomeIcon icon={faPlugCircleXmark} />
-                    <span>Disconnected</span>
+                  <Badge variant="danger">
+                    <UnplugIcon />
+                    Disconnected
                   </Badge>
                 </div>
               </Tooltip>
@@ -71,17 +70,14 @@ export const SecretScanningDataSourceSection = ({ dataSource }: Props) => {
             <DataSourceConfigDisplay dataSource={dataSource} />
             <GenericFieldLabel label="Auto-Scan">
               {isAutoScanEnabled ? (
-                <Badge
-                  variant="success"
-                  className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-                >
-                  <FontAwesomeIcon icon={faCheck} />
-                  <span>Enabled</span>
+                <Badge variant="success">
+                  <CheckIcon />
+                  Enabled
                 </Badge>
               ) : (
-                <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>Disabled</span>
+                <Badge variant="neutral">
+                  <BanIcon />
+                  Disabled
                 </Badge>
               )}
             </GenericFieldLabel>

frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningResourceRow.tsx

@@ -1,24 +1,21 @@
 import { useCallback } from "react";
 import {
-  faBan,
   faCheck,
   faCopy,
   faEllipsisV,
   faExpand,
-  faInfoCircle,
-  faSearch,
-  faWarning
+  faInfoCircle
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { formatDistance } from "date-fns";
+import { AlertTriangleIcon, BanIcon, ScanTextIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretScanningScanStatusBadge } from "@app/components/secret-scanning";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -28,6 +25,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionSecretScanningDataSourceActions,
   ProjectPermissionSub
@@ -141,45 +139,38 @@ export const SecretScanningResourceRow = ({ resource, dataSource }: Props) => {
       <Td>
         {/* eslint-disable-next-line no-nested-ternary */}
         {lastScanStatus?.match(/queued|scanning/) ? (
-          <Badge
-            variant="primary"
-            className="flex h-5 w-min animate-pulse items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300"
-          >
-            <FontAwesomeIcon icon={faSearch} />
-            <span>Scanning For Leaks</span>
+          <Badge variant="neutral">
+            <ScanTextIcon />
+            Scanning For Leaks
           </Badge>
         ) : // eslint-disable-next-line no-nested-ternary
         lastScannedAt ? (
           // eslint-disable-next-line no-nested-ternary
           unresolvedFindings ? (
-            <Badge
-              onClick={() =>
-                navigate({
-                  to: "/projects/secret-scanning/$projectId/findings",
-                  params: {
-                    projectId: dataSource.projectId
-                  },
-                  search: {
-                    search: name,
-                    status: SecretScanningFindingStatus.Unresolved
-                  }
-                })
-              }
-              variant="primary"
-              className="flex h-5 w-min cursor-pointer items-center gap-1.5 whitespace-nowrap"
-            >
-              <FontAwesomeIcon icon={faWarning} />
-              <span>
+            <Badge asChild variant="warning">
+              <button
+                type="button"
+                onClick={() =>
+                  navigate({
+                    to: "/projects/secret-scanning/$projectId/findings",
+                    params: {
+                      projectId: dataSource.projectId
+                    },
+                    search: {
+                      search: name,
+                      status: SecretScanningFindingStatus.Unresolved
+                    }
+                  })
+                }
+              >
+                <AlertTriangleIcon />
                 {unresolvedFindings} Secret{unresolvedFindings > 1 ? "s" : ""} Detected
-              </span>
+              </button>
             </Badge>
           ) : lastScanStatus === SecretScanningScanStatus.Failed ? (
             <span className="text-mineshaft-400">No findings</span>
           ) : (
-            <Badge
-              variant="success"
-              className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-            >
+            <Badge variant="success">
               <FontAwesomeIcon icon={faCheck} />
               No Secrets Detected
             </Badge>
@@ -209,12 +200,10 @@ export const SecretScanningResourceRow = ({ resource, dataSource }: Props) => {
               className="text-xs"
               content={`This ${resourceDetails.singularNoun} will not be scanned due to exclusion in Data Source configuration.`}
             >
-              <div className="ml-auto">
-                <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>Inactive</span>
-                </Badge>
-              </div>
+              <Badge className="ml-auto" variant="neutral">
+                <BanIcon />
+                Inactive
+              </Badge>
             </Tooltip>
           )}
           <Tooltip className="max-w-sm text-center" content="Options">

frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/components/SecretScanningScanRow.tsx

@@ -1,14 +1,14 @@
 import { useCallback } from "react";
-import { faCheck, faCopy, faEllipsisV, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faEllipsisV } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";
+import { AlertTriangleIcon, CheckIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { SecretScanningScanStatusBadge } from "@app/components/secret-scanning";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -18,6 +18,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useProject } from "@app/context";
 import { useToggle } from "@app/hooks";
 import {
@@ -92,40 +93,33 @@ export const SecretScanningScanRow = ({ scan }: Props) => {
           ) : // eslint-disable-next-line no-nested-ternary
           totalFindings ? (
             <div className="flex flex-col">
-              <Badge
-                onClick={() =>
-                  navigate({
-                    to: "/projects/secret-scanning/$projectId/findings",
-                    params: {
-                      projectId: currentProject.id
-                    },
-                    search: {
-                      search: `scanId:${id}`
-                    }
-                  })
-                }
-                variant={unresolvedFindings ? "primary" : undefined}
-                className={twMerge(
-                  "flex h-5 w-min cursor-pointer items-center gap-1.5 whitespace-nowrap",
-                  !unresolvedFindings && "bg-mineshaft-400/50 text-bunker-300"
-                )}
-              >
-                <FontAwesomeIcon icon={unresolvedFindings ? faWarning : faCheck} />
-                <span className="text-xs">
+              <Badge asChild variant={unresolvedFindings ? "warning" : "success"}>
+                <button
+                  type="button"
+                  onClick={() =>
+                    navigate({
+                      to: "/projects/secret-scanning/$projectId/findings",
+                      params: {
+                        projectId: currentProject.id
+                      },
+                      search: {
+                        search: `scanId:${id}`
+                      }
+                    })
+                  }
+                >
+                  {unresolvedFindings ? <AlertTriangleIcon /> : <CheckIcon />}
                   {totalFindings}{" "}
                   {unresolvedFindings
                     ? `Secret${totalFindings > 1 ? "s" : ""} Detected`
                     : "Leak Resolved"}
-                </span>
+                </button>
               </Badge>
             </div>
           ) : status === SecretScanningScanStatus.Failed ? (
             <span className="text-mineshaft-400">No findings</span>
           ) : (
-            <Badge
-              variant="success"
-              className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-            >
+            <Badge variant="success">
               <FontAwesomeIcon icon={faCheck} />
               No Secrets Detected
             </Badge>

frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourceRow.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from "react";
 import {
-  faBan,
   faCheck,
   faCopy,
   faEdit,
@@ -8,22 +7,20 @@ import {
   faExpand,
   faInfoCircle,
   faPlugCircleXmark,
-  faSearch,
   faToggleOff,
   faToggleOn,
-  faTrash,
-  faWarning
+  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { formatDistance } from "date-fns";
+import { AlertTriangleIcon, BanIcon, ScanTextIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretScanningScanStatusBadge } from "@app/components/secret-scanning";
 import {
-  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -33,6 +30,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 { ProjectPermissionSecretScanningDataSourceActions } from "@app/context/ProjectPermissionContext/types";
@@ -139,46 +137,39 @@ export const SecretScanningDataSourceRow = ({
       <Td>
         {/* eslint-disable-next-line no-nested-ternary */}
         {lastScanStatus?.match(/queued|scanning/) ? (
-          <Badge
-            variant="primary"
-            className="flex h-5 w-min animate-pulse items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300"
-          >
-            <FontAwesomeIcon icon={faSearch} />
-            <span>Scanning For Leaks</span>
+          <Badge variant="neutral">
+            <ScanTextIcon />
+            Scanning For Leaks
           </Badge>
         ) : // eslint-disable-next-line no-nested-ternary
         lastScannedAt ? (
           // eslint-disable-next-line no-nested-ternary
           unresolvedFindings ? (
-            <Badge
-              variant="primary"
-              className="flex h-5 w-min cursor-pointer items-center gap-1.5 whitespace-nowrap"
-              onClick={(e) => {
-                e.stopPropagation();
-                navigate({
-                  to: "/projects/secret-scanning/$projectId/findings",
-                  params: {
-                    projectId
-                  },
-                  search: {
-                    search: name,
-                    status: SecretScanningFindingStatus.Unresolved
-                  }
-                });
-              }}
-            >
-              <FontAwesomeIcon icon={faWarning} />
-              <span>
+            <Badge variant="warning" asChild>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate({
+                    to: "/projects/secret-scanning/$projectId/findings",
+                    params: {
+                      projectId
+                    },
+                    search: {
+                      search: name,
+                      status: SecretScanningFindingStatus.Unresolved
+                    }
+                  });
+                }}
+              >
+                <AlertTriangleIcon />
                 {unresolvedFindings} Secret{unresolvedFindings > 1 ? "s" : ""} Detected
-              </span>
+              </button>
             </Badge>
           ) : lastScanStatus === SecretScanningScanStatus.Failed ? (
             <span className="text-mineshaft-400">No findings</span>
           ) : (
-            <Badge
-              variant="success"
-              className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-            >
+            <Badge variant="success">
               <FontAwesomeIcon icon={faCheck} />
               No Secrets Detected
             </Badge>
@@ -206,12 +197,10 @@ export const SecretScanningDataSourceRow = ({
               className="text-xs"
               content={`Auto-Scan is disabled. Scans will not be automatically triggered when a ${autoScanDescription.verb} occurs to ${autoScanDescription.pluralNoun} associated with this data source`}
             >
-              <div className="ml-auto">
-                <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-Scan Disabled</span>
-                </Badge>
-              </div>
+              <Badge className="ml-auto" variant="neutral">
+                <BanIcon />
+                Auto-Scan Disabled
+              </Badge>
             </Tooltip>
           )}
           {isDisconnected && (

frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/components/SecretScanningDataSourcesSection.tsx

@@ -1,10 +1,11 @@
-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 { ProjectPermissionCan } from "@app/components/permissions";
 import { CreateSecretScanningDataSourceModal } from "@app/components/secret-scanning";
 import { Button, Spinner } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectPermissionSub, useProject, useSubscription } from "@app/context";
 import { ProjectPermissionSecretScanningDataSourceActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
@@ -40,22 +41,9 @@ export const SecretScanningDataSourcesSection = () => {
       <div className="w-full 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">Data Sources</p>
-              <a
-                href="https://infisical.com/docs/documentation/platform/secret-scanning/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>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/secret-scanning/overview" />
             </div>
             <p className="text-sm text-bunker-300">
               Configure Data Sources to scan for secret leaks from third-party services.

frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingRow.tsx

@@ -7,7 +7,6 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  Badge,
   Button,
   Checkbox,
   DropdownMenu,
@@ -20,19 +19,17 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import {
   ProjectPermissionSecretScanningFindingActions,
   ProjectPermissionSub
 } from "@app/context/ProjectPermissionContext/types";
 import {
   SECRET_SCANNING_DATA_SOURCE_MAP,
-  SECRET_SCANNING_FINDING_STATUS_ICON_MAP
+  SECRET_SCANNING_FINDING_STATUS_MAP
 } from "@app/helpers/secretScanningV2";
 import { useToggle } from "@app/hooks";
-import {
-  SecretScanningFindingStatus,
-  TSecretScanningFinding
-} from "@app/hooks/api/secretScanningV2";
+import { TSecretScanningFinding } from "@app/hooks/api/secretScanningV2";
 
 type Props = {
   isSelected: boolean;
@@ -83,6 +80,8 @@ export const SecretScanningFindingRow = ({
 
   const [isExpanded, setIsExpanded] = useToggle(false);
 
+  const StatusIcon = SECRET_SCANNING_FINDING_STATUS_MAP[status].Icon;
+
   return (
     <>
       <Tr
@@ -127,20 +126,10 @@ export const SecretScanningFindingRow = ({
         <Td className="whitespace-nowrap">{rule}</Td>
         <Td className="whitespace-nowrap">
           <Tooltip position="left" content={remarks}>
-            <div className="w-min">
-              <Badge
-                variant={status === SecretScanningFindingStatus.Resolved ? "success" : "primary"}
-                className={twMerge(
-                  "flex h-5 w-min items-center gap-1.5 whitespace-nowrap",
-                  (status === SecretScanningFindingStatus.FalsePositive ||
-                    status === SecretScanningFindingStatus.Ignore) &&
-                    "bg-mineshaft-400/50 text-bunker-300"
-                )}
-              >
-                <FontAwesomeIcon icon={SECRET_SCANNING_FINDING_STATUS_ICON_MAP[status].icon} />
-                <span className="capitalize">{status.replace("-", " ")}</span>
-              </Badge>
-            </div>
+            <Badge variant={SECRET_SCANNING_FINDING_STATUS_MAP[status].variant}>
+              <StatusIcon />
+              <span className="capitalize">{status.replace("-", " ")}</span>
+            </Badge>
           </Tooltip>
         </Td>
         <Td>
@@ -172,7 +161,7 @@ export const SecretScanningFindingRow = ({
         </Td>
       </Tr>
       <Tr>
-        <Td colSpan={6} className="border-none! p-0">
+        <Td colSpan={7} className="border-none! p-0">
           <div
             className={`w-full overflow-hidden bg-mineshaft-900/75 transition-all duration-500 ${
               isExpanded ? "max-h-200 opacity-100" : "max-h-0"
@@ -225,9 +214,11 @@ export const SecretScanningFindingRow = ({
                     colorSchema="secondary"
                     isDisabled={!isAllowed}
                     leftIcon={
-                      <FontAwesomeIcon
-                        className={SECRET_SCANNING_FINDING_STATUS_ICON_MAP[status].className}
-                        icon={SECRET_SCANNING_FINDING_STATUS_ICON_MAP[status].icon}
+                      <StatusIcon
+                        className={twMerge(
+                          "size-4",
+                          SECRET_SCANNING_FINDING_STATUS_MAP[status].className
+                        )}
                       />
                     }
                   >

frontend/src/pages/secret-scanning/SecretScanningFindingsPage/components/SecretScanningFindingsSection.tsx

@@ -1,7 +1,5 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import { ContentLoader } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { useProject } from "@app/context";
 import { useListSecretScanningFindings } from "@app/hooks/api/secretScanningV2";
 
@@ -23,22 +21,9 @@ export const SecretScanningFindingsSection = () => {
     <div className="w-full 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">Findings</p>
-            <a
-              href="https://infisical.com/docs/documentation/platform/secret-scanning/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>
+            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/secret-scanning/usage#findings" />
           </div>
           <p className="text-sm text-bunker-300">
             Secret leaks discovered across your data sources