From b99d984d91deb8e9576030701ee816ad4bcdba55 Mon Sep 17 00:00:00 2001
From: Holden Folk <holdenfolk1@gmail.com>
Date: Tue, 28 Oct 2025 14:05:28 -0400
Subject: [PATCH] Add badge variants and deprecate status component

---
 .changeset/blue-spoons-argue.md               |  5 ++++
 docs/stories/Status.mdx                       |  4 +++
 .../src/components/Badge/Badge.tsx            | 26 ++++++++++++++++---
 3 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/blue-spoons-argue.md

diff --git a/.changeset/blue-spoons-argue.md b/.changeset/blue-spoons-argue.md
new file mode 100644
index 000000000..bb72883d1
--- /dev/null
+++ b/.changeset/blue-spoons-argue.md
@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+Add variants to Badge component
diff --git a/docs/stories/Status.mdx b/docs/stories/Status.mdx
index ac72e5cb5..84deab116 100644
--- a/docs/stories/Status.mdx
+++ b/docs/stories/Status.mdx
@@ -1,12 +1,16 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Status } from '@strapi/design-system';
 
+import { DeprecationNotice } from '../components/DeprecationNotice';
+
 import * as StatusStories from './Status.stories';
 
 <Meta of={StatusStories} />
 
 # Status
 
+<DeprecationNotice href="/?path=/docs/stories/Badge">Badge</DeprecationNotice>
+
 Status are used to give an important visual indication to the users on a page level.
 
 **Best practices**
diff --git a/packages/design-system/src/components/Badge/Badge.tsx b/packages/design-system/src/components/Badge/Badge.tsx
index 975542707..d2f911bc7 100644
--- a/packages/design-system/src/components/Badge/Badge.tsx
+++ b/packages/design-system/src/components/Badge/Badge.tsx
@@ -1,4 +1,4 @@
-import { css, styled } from 'styled-components';
+import { css, styled, DefaultTheme } from 'styled-components';
 
 import { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';
 import { Typography } from '../../primitives/Typography';
@@ -6,17 +6,26 @@ import { DefaultThemeOrCSSProp } from '../../types';
 
 type BadgeSize = 'S' | 'M';
 
+type BadgeVariant = 'success' | 'primary' | 'danger' | 'warning' | 'neutral' | 'secondary' | 'alternative';
+
 interface BadgeProps extends FlexProps {
   /**
    * If `true`, it changes the `backgroundColor` to `primary200` and the `textColor` to `primary600`
    */
   active?: boolean;
+
   backgroundColor?: DefaultThemeOrCSSProp<'colors', 'background'>;
   /**
    * @default 'M'
    */
   size?: BadgeSize;
+
   textColor?: DefaultThemeOrCSSProp<'colors', 'color'>;
+
+  /**
+   * @default 'neutral'
+   */
+  variant?: BadgeVariant;
 }
 
 const Badge = ({
@@ -24,12 +33,23 @@ const Badge = ({
   size = 'M',
   textColor = 'neutral600',
   backgroundColor = 'neutral150',
+  variant,
   children,
   minWidth = 5,
   ...props
 }: BadgeProps) => {
   const paddingX = size === 'S' ? 1 : 2;
 
+  const overridedColors = variant
+    ? {
+        backgroundColor: `${variant}200` satisfies keyof DefaultTheme['colors'],
+        textColor: `${variant}700` satisfies keyof DefaultTheme['colors'],
+      }
+    : {
+        backgroundColor,
+        textColor,
+      };
+
   return (
     <Base
       inline
@@ -38,11 +58,11 @@ const Badge = ({
       minWidth={minWidth}
       paddingLeft={paddingX}
       paddingRight={paddingX}
-      background={active ? 'primary200' : backgroundColor}
+      background={active ? 'primary200' : overridedColors.backgroundColor}
       $size={size}
       {...props}
     >
-      <Typography variant="sigma" textColor={active ? 'primary600' : textColor} lineHeight="1rem">
+      <Typography variant="sigma" textColor={active ? 'primary600' : overridedColors.textColor} lineHeight="1rem">
         {children}
       </Typography>
     </Base>