diff --git a/packages/ui/src/components/Badge.tsx b/packages/ui/src/components/Badge.tsx
index 91237bf0..f0494a5d 100644
--- a/packages/ui/src/components/Badge.tsx
+++ b/packages/ui/src/components/Badge.tsx
@@ -10,7 +10,7 @@ import { Icon } from "./Icon/Icon.js";
 import { type IconName } from "./Icon/types.js";
 import { type PartialSimpleTypographyProps } from "./typography/types.js";
 
-type BadgeKind = "danger" | "default";
+export type BadgeKind = "success" | "danger" | "default";
 
 export type BadgeProps = {
   content?: ToReactNodesArgs | undefined;
@@ -41,7 +41,9 @@ export function Badge({
   const defaultTypography = {
     type: typographyProp?.type || "Label Moderate",
     size: typographyProp?.size || "Small",
-    color: typographyProp?.color || (kind === "danger" ? "danger" : "text"),
+    color:
+      typographyProp?.color ||
+      (kind === "danger" ? "danger" : kind === "success" ? "white" : "text"),
   } as const;
 
   const nodesWithTypography = setDefaultReactNodesTypography(contentProp, {
@@ -57,7 +59,13 @@ export function Badge({
           name={icon.name}
           width={20}
           color={
-            icon.color ? icon.color : kind === "danger" ? "danger" : undefined
+            icon.color
+              ? icon.color
+              : kind === "danger"
+              ? "danger"
+              : kind === "success"
+              ? "success"
+              : undefined
           }
         />
       ) : null}
@@ -90,6 +98,8 @@ const StyledBadge = styled.div<StyledBadgeProps>`
   background-color: ${({ theme, kind }) => {
     if (kind === "danger") {
       return getColor(theme, "red42a10");
+    } else if (kind === "success") {
+      return getColor(theme, "success");
     } else {
       return getColor(theme, theme.badge.bg);
     }
diff --git a/packages/ui/src/components/PageSection/PageSection.tsx b/packages/ui/src/components/PageSection/PageSection.tsx
index 1a858d45..00d24b6c 100644
--- a/packages/ui/src/components/PageSection/PageSection.tsx
+++ b/packages/ui/src/components/PageSection/PageSection.tsx
@@ -14,7 +14,7 @@ import { Heading, headingWithDefaults } from "../../styles/type.js";
 import { type NewRoutesType } from "../../types/index.js";
 import { select } from "../../utils/emotion.js";
 import { toReactNodes } from "../../utils/toReactNodes/toReactNodes.js";
-import { Badge, badgeSmVPadding } from "../Badge.js";
+import { Badge, type BadgeKind, badgeSmVPadding } from "../Badge.js";
 import { Dropdown } from "../Dropdown.js";
 import { Icon } from "../Icon/Icon.js";
 import { type IconName } from "../Icon/types.js";
@@ -192,6 +192,7 @@ type PageSectionBoxActionRowProps = {
   action?: PageSectionBoxActionProps | undefined;
   title?: string;
   titleBadge?: string | undefined;
+  titleBadgeKind?: BadgeKind | undefined;
   description?: string;
   separator?: boolean;
   children?: React.ReactNode;
@@ -201,6 +202,7 @@ type PageSectionBoxActionRowProps = {
 export const PageSectionBoxActionRow = ({
   title,
   titleBadge,
+  titleBadgeKind = "default",
   description,
   separator,
   children,
@@ -217,7 +219,9 @@ export const PageSectionBoxActionRow = ({
           <div>
             <PageSectionBoxTitle>
               {title}
-              {titleBadge ? <Badge content={titleBadge} ml={4} /> : null}
+              {titleBadge ? (
+                <Badge content={titleBadge} ml={4} kind={titleBadgeKind} />
+              ) : null}
             </PageSectionBoxTitle>
             {description ? (
               <PageSectionBoxDescription>