From 4d9d1bf0f416eba57512f4b01e82b0bdd0ed3bfe Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 14 Aug 2026 09:39:58 -0300
Subject: [PATCH 1/4] feat(chip): add chip component

---
 .../documentation/components/Chip.stories.tsx | 43 +++++++++++++++-
 frontend/web/components/base/Chip/Chip.scss   | 19 +++++++
 frontend/web/components/base/Chip/Chip.tsx    | 20 ++++++--
 frontend/web/components/base/Chip/ChipDot.tsx |  6 +++
 frontend/web/components/base/Chip/index.ts    |  1 +
 .../experiments/StatusBadge/StatusBadge.scss  | 51 -------------------
 .../experiments/StatusBadge/StatusBadge.tsx   | 23 +++++----
 7 files changed, 98 insertions(+), 65 deletions(-)
 create mode 100644 frontend/web/components/base/Chip/ChipDot.tsx
 delete mode 100644 frontend/web/components/experiments/StatusBadge/StatusBadge.scss

diff --git a/frontend/documentation/components/Chip.stories.tsx b/frontend/documentation/components/Chip.stories.tsx
index c88fe9860935..97841220196e 100644
--- a/frontend/documentation/components/Chip.stories.tsx
+++ b/frontend/documentation/components/Chip.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { Meta, StoryObj } from 'storybook'
 
-import Chip from 'components/base/Chip'
+import Chip, { ChipDot } from 'components/base/Chip'
 
 const meta: Meta<typeof Chip> = {
   args: { children: 'Production' },
@@ -11,7 +11,7 @@ const meta: Meta<typeof Chip> = {
     docs: {
       description: {
         component:
-          'Canonical token-based chip primitive: a small labelled pill token. Layout via Bootstrap utilities, colour/radius via token utilities, padding/sizes/border/truncation in SCSS. Leading/trailing icons go in as children. Selection lives in ToggleChip and count badges are a separate Badge concern. The legacy `.chip` (old SCSS vars + manual dark-mode block, ~35×) migrates onto this under #6606.',
+          'Canonical token-based chip primitive: a small labelled pill token. Layout via Bootstrap utilities, colour/radius via token utilities, padding/sizes/border/truncation in SCSS. Leading/trailing icons go in as children. `variant` covers neutral, accent and the four status colours; `pill` gives the fully rounded ends that status and count badges use, and `ChipDot` adds the leading dot in `currentColor`. Selection lives in ToggleChip. The legacy `.chip` (old SCSS vars + manual dark-mode block, ~35×) migrates onto this under #6606.',
       },
     },
     layout: 'centered',
@@ -38,6 +38,45 @@ export const Sizes: Story = {
   ),
 }
 
+export const StatusVariants: Story = {
+  render: () => (
+    <div className='d-flex align-items-center gap-2'>
+      <Chip variant='info' size='sm' pill>
+        <ChipDot />
+        Draft
+      </Chip>
+      <Chip variant='success' size='sm' pill>
+        <ChipDot />
+        Running
+      </Chip>
+      <Chip variant='warning' size='sm' pill>
+        <ChipDot />
+        Paused
+      </Chip>
+      <Chip variant='muted' size='sm' pill>
+        <ChipDot />
+        Completed
+      </Chip>
+    </div>
+  ),
+}
+
+export const Counts: Story = {
+  render: () => (
+    <div className='d-flex align-items-center gap-2'>
+      <Chip variant='accent' size='xs' pill>
+        5
+      </Chip>
+      <Chip variant='neutral' size='xs' pill>
+        0
+      </Chip>
+      <Chip variant='neutral' size='xs' pill>
+        128
+      </Chip>
+    </div>
+  ),
+}
+
 export const Removable: Story = {
   args: { children: 'feature-flag', onRemove: () => undefined },
 }
diff --git a/frontend/web/components/base/Chip/Chip.scss b/frontend/web/components/base/Chip/Chip.scss
index 854427ce3f98..c55b84a31c2c 100644
--- a/frontend/web/components/base/Chip/Chip.scss
+++ b/frontend/web/components/base/Chip/Chip.scss
@@ -13,6 +13,25 @@
     border-color: var(--color-border-action);
   }
 
+  // Status colours carry their meaning in the fill, so an outline only adds
+  // noise. Transparent rather than removed, so a status chip is the same
+  // height as a bordered one beside it.
+  &--success,
+  &--warning,
+  &--info,
+  &--muted {
+    border-color: transparent;
+  }
+
+  // Status dot. currentColor, so it follows the variant with nothing to wire.
+  &__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: currentColor;
+    flex-shrink: 0;
+  }
+
   // Sizes (default is the base above).
   &--sm {
     padding: 3px 8px;
diff --git a/frontend/web/components/base/Chip/Chip.tsx b/frontend/web/components/base/Chip/Chip.tsx
index 296219372dda..014bcfad0627 100644
--- a/frontend/web/components/base/Chip/Chip.tsx
+++ b/frontend/web/components/base/Chip/Chip.tsx
@@ -5,12 +5,20 @@ import { colorIconSecondary } from 'common/theme/tokens'
 import './Chip.scss'
 
 export type ChipSize = 'default' | 'sm' | 'xs'
-export type ChipVariant = 'neutral' | 'accent'
+export type ChipVariant =
+  | 'neutral'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'muted'
 
 export type ChipProps = {
   children: ReactNode
   variant?: ChipVariant
   size?: ChipSize
+  /** Fully rounded ends, for status and count badges. */
+  pill?: boolean
   truncate?: boolean
   onRemove?: () => void
   onClick?: () => void
@@ -30,7 +38,11 @@ export type ChipProps = {
 // bg + text come from token utilities; the variant border lives in Chip.scss.
 const VARIANT_UTILITIES: Record<ChipVariant, string> = {
   accent: 'bg-surface-action-subtle text-action',
+  info: 'bg-surface-info text-info',
+  muted: 'bg-surface-muted text-secondary',
   neutral: 'bg-surface-subtle text-default',
+  success: 'bg-surface-success text-success',
+  warning: 'bg-surface-warning text-warning',
 }
 
 // Token-based chip primitive. Uses `ds-chip` rather than the legacy `.chip`
@@ -46,6 +58,7 @@ const Chip = ({
   onClick,
   onKeyDown,
   onRemove,
+  pill = false,
   ref,
   role,
   size = 'default',
@@ -58,10 +71,11 @@ const Chip = ({
     <span
       ref={ref}
       className={classNames(
-        'ds-chip d-inline-flex align-items-center align-middle gap-1 rounded-sm',
+        'ds-chip d-inline-flex align-items-center align-middle gap-1',
+        pill ? 'rounded-full' : 'rounded-sm',
         VARIANT_UTILITIES[variant],
+        `ds-chip--${variant}`,
         {
-          'ds-chip--accent': variant === 'accent',
           'ds-chip--clickable': interactive,
           [`ds-chip--${size}`]: size !== 'default',
           'ds-chip--truncate': truncate,
diff --git a/frontend/web/components/base/Chip/ChipDot.tsx b/frontend/web/components/base/Chip/ChipDot.tsx
new file mode 100644
index 000000000000..c00876159cce
--- /dev/null
+++ b/frontend/web/components/base/Chip/ChipDot.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react'
+
+// The leading dot on a status chip. Decorative: the label carries the meaning.
+const ChipDot: FC = () => <span className='ds-chip__dot' aria-hidden='true' />
+
+export default ChipDot
diff --git a/frontend/web/components/base/Chip/index.ts b/frontend/web/components/base/Chip/index.ts
index 7b7ac073a3c4..3667ea1425cc 100644
--- a/frontend/web/components/base/Chip/index.ts
+++ b/frontend/web/components/base/Chip/index.ts
@@ -1,2 +1,3 @@
 export { default } from './Chip'
+export { default as ChipDot } from './ChipDot'
 export type { ChipProps, ChipSize, ChipVariant } from './Chip'
diff --git a/frontend/web/components/experiments/StatusBadge/StatusBadge.scss b/frontend/web/components/experiments/StatusBadge/StatusBadge.scss
deleted file mode 100644
index bc8234e2ec38..000000000000
--- a/frontend/web/components/experiments/StatusBadge/StatusBadge.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  border-radius: var(--radius-full);
-  font-size: var(--font-caption-xs-size);
-  font-weight: var(--font-weight-medium);
-
-  &__dot {
-    width: 6px;
-    height: 6px;
-    border-radius: var(--radius-full);
-  }
-
-  &--created {
-    background: var(--color-surface-info);
-    color: var(--color-text-info);
-
-    .status-badge__dot {
-      background: var(--color-text-info);
-    }
-  }
-
-  &--running {
-    background: var(--color-surface-success);
-    color: var(--color-text-success);
-
-    .status-badge__dot {
-      background: var(--color-text-success);
-    }
-  }
-
-  &--paused {
-    background: var(--color-surface-warning);
-    color: var(--color-text-warning);
-
-    .status-badge__dot {
-      background: var(--color-text-warning);
-    }
-  }
-
-  &--completed {
-    background: var(--color-surface-muted);
-    color: var(--color-text-secondary);
-
-    .status-badge__dot {
-      background: var(--color-text-secondary);
-    }
-  }
-}
diff --git a/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx b/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
index 10561dfde212..ae5f56bfc980 100644
--- a/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
+++ b/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
@@ -1,19 +1,24 @@
 import { FC } from 'react'
+import Chip, { ChipDot, ChipVariant } from 'components/base/Chip'
 import { ExperimentStatus } from 'common/types/responses'
 import { EXPERIMENT_STATUS_LABELS } from 'components/experiments/constants'
-import './StatusBadge.scss'
+
+const STATUS_VARIANTS: Record<ExperimentStatus, ChipVariant> = {
+  completed: 'muted',
+  created: 'info',
+  paused: 'warning',
+  running: 'success',
+}
 
 type StatusBadgeProps = {
   status: ExperimentStatus
 }
 
-const StatusBadge: FC<StatusBadgeProps> = ({ status }) => {
-  return (
-    <span className={`status-badge status-badge--${status}`}>
-      <span className='status-badge__dot' />
-      {EXPERIMENT_STATUS_LABELS[status]}
-    </span>
-  )
-}
+const StatusBadge: FC<StatusBadgeProps> = ({ status }) => (
+  <Chip variant={STATUS_VARIANTS[status]} size='sm' pill>
+    <ChipDot />
+    {EXPERIMENT_STATUS_LABELS[status]}
+  </Chip>
+)
 
 export default StatusBadge

From 0bfc15a74b2a1b89b1c7e5cbadb2c644f31dc2fb Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 10 Sep 2026 17:39:59 -0300
Subject: [PATCH 2/4] feat(chip): add danger and solid variants

Completes the variant set so batch 4 of the consolidation does not need a
second variants PR.

- `danger` maps to the existing surface/text danger tokens.
- `solid` is the one filled variant, on --color-surface-action. Uses `text-white`
  rather than a token because there is no inverse-text token yet; white on that
  surface is 5.93:1, so AA but not AAA.

Both get a transparent border like the other status variants, so a filled chip
keeps the same height as a bordered one beside it.

Deliberately not covered: the app has a second, darker solid (`bg-primary900`,
used by BetaFlag and PlanBasedAccess) alongside the `bg-primary` one this
matches. Which of the two survives is a design decision, not a mapping.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/documentation/components/Chip.stories.tsx | 10 +++++++++-
 frontend/web/components/base/Chip/Chip.scss        |  4 +++-
 frontend/web/components/base/Chip/Chip.tsx         |  8 ++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/documentation/components/Chip.stories.tsx b/frontend/documentation/components/Chip.stories.tsx
index 97841220196e..82a39eb344a3 100644
--- a/frontend/documentation/components/Chip.stories.tsx
+++ b/frontend/documentation/components/Chip.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta<typeof Chip> = {
     docs: {
       description: {
         component:
-          'Canonical token-based chip primitive: a small labelled pill token. Layout via Bootstrap utilities, colour/radius via token utilities, padding/sizes/border/truncation in SCSS. Leading/trailing icons go in as children. `variant` covers neutral, accent and the four status colours; `pill` gives the fully rounded ends that status and count badges use, and `ChipDot` adds the leading dot in `currentColor`. Selection lives in ToggleChip. The legacy `.chip` (old SCSS vars + manual dark-mode block, ~35×) migrates onto this under #6606.',
+          'Canonical token-based chip primitive: a small labelled pill token. Layout via Bootstrap utilities, colour/radius via token utilities, padding/sizes/border/truncation in SCSS. Leading/trailing icons go in as children. `variant` covers neutral, accent, the five status colours and `solid`; `pill` gives the fully rounded ends that status and count badges use, and `ChipDot` adds the leading dot in `currentColor`. Selection lives in ToggleChip. The legacy `.chip` (old SCSS vars + manual dark-mode block, ~35×) migrates onto this under #6606.',
       },
     },
     layout: 'centered',
@@ -28,6 +28,10 @@ export const Accent: Story = {
   args: { children: '"hello"', variant: 'accent' },
 }
 
+export const Solid: Story = {
+  args: { children: 'Enterprise', variant: 'solid' },
+}
+
 export const Sizes: Story = {
   render: () => (
     <div className='d-flex align-items-center gap-2'>
@@ -53,6 +57,10 @@ export const StatusVariants: Story = {
         <ChipDot />
         Paused
       </Chip>
+      <Chip variant='danger' size='sm' pill>
+        <ChipDot />
+        Failed
+      </Chip>
       <Chip variant='muted' size='sm' pill>
         <ChipDot />
         Completed
diff --git a/frontend/web/components/base/Chip/Chip.scss b/frontend/web/components/base/Chip/Chip.scss
index c55b84a31c2c..5506c0d91737 100644
--- a/frontend/web/components/base/Chip/Chip.scss
+++ b/frontend/web/components/base/Chip/Chip.scss
@@ -18,8 +18,10 @@
   // height as a bordered one beside it.
   &--success,
   &--warning,
+  &--danger,
   &--info,
-  &--muted {
+  &--muted,
+  &--solid {
     border-color: transparent;
   }
 
diff --git a/frontend/web/components/base/Chip/Chip.tsx b/frontend/web/components/base/Chip/Chip.tsx
index 014bcfad0627..21cbe25a644b 100644
--- a/frontend/web/components/base/Chip/Chip.tsx
+++ b/frontend/web/components/base/Chip/Chip.tsx
@@ -10,8 +10,10 @@ export type ChipVariant =
   | 'accent'
   | 'success'
   | 'warning'
+  | 'danger'
   | 'info'
   | 'muted'
+  | 'solid'
 
 export type ChipProps = {
   children: ReactNode
@@ -38,9 +40,15 @@ export type ChipProps = {
 // bg + text come from token utilities; the variant border lives in Chip.scss.
 const VARIANT_UTILITIES: Record<ChipVariant, string> = {
   accent: 'bg-surface-action-subtle text-action',
+  danger: 'bg-surface-danger text-danger',
   info: 'bg-surface-info text-info',
   muted: 'bg-surface-muted text-secondary',
   neutral: 'bg-surface-subtle text-default',
+  // The one filled variant. `text-white` rather than a token because there is
+  // no inverse-text token yet; white on --color-surface-action is 5.93:1, so AA
+  // but not AAA. Note the app has a second, darker solid (`bg-primary900`, used
+  // by BetaFlag and PlanBasedAccess) that this deliberately does not cover.
+  solid: 'bg-surface-action text-white',
   success: 'bg-surface-success text-success',
   warning: 'bg-surface-warning text-warning',
 }

From a234bab538fda58bf2e10623089693543c090196 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 10 Sep 2026 17:48:40 -0300
Subject: [PATCH 3/4] fix(chip): align radius and xs height with the tags frame

The Figma tags frame is the source of truth and specifies a 6px radius on a
fixed 24px height. We had `rounded-sm` (4px) and no explicit heights at all.

- Non-pill chips move to `rounded-md`. Affects all 14 existing ds-chip call
  sites, which is the intent.
- `--xs` states `height: 24px` rather than deriving it from the inherited
  line-height. The frame's 8px vertical padding is not applied: it is an
  artefact of a height override on the auto-layout and would leave 8px for a
  12px label.

`--xs` is the size the design maps to; the tag surfaces the frame covers
(feature rows, TagValues) all pass the xs modifier, and the legacy `.chip--xs`
was already 24px.

`pill` keeps `rounded-full`, preserving the shape StatusBadge.scss already had
on main. That is now the only divergence from the frame's 6px, on a surface the
frame does not cover, so it is worth confirming with design.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/web/components/base/Chip/Chip.scss | 4 ++++
 frontend/web/components/base/Chip/Chip.tsx  | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/web/components/base/Chip/Chip.scss b/frontend/web/components/base/Chip/Chip.scss
index 5506c0d91737..3407d57ff58d 100644
--- a/frontend/web/components/base/Chip/Chip.scss
+++ b/frontend/web/components/base/Chip/Chip.scss
@@ -40,7 +40,11 @@
     font-size: 0.75rem;
   }
 
+  // 24px is fixed in the tags frame, so it is stated rather than left to derive
+  // from the inherited line-height. The frame's 8px vertical padding is an
+  // artefact of a height override on the auto-layout and is not applied.
   &--xs {
+    height: 24px;
     padding: 1px 6px;
     font-size: 0.6875rem;
   }
diff --git a/frontend/web/components/base/Chip/Chip.tsx b/frontend/web/components/base/Chip/Chip.tsx
index 21cbe25a644b..f6e7b85f6f29 100644
--- a/frontend/web/components/base/Chip/Chip.tsx
+++ b/frontend/web/components/base/Chip/Chip.tsx
@@ -80,7 +80,8 @@ const Chip = ({
       ref={ref}
       className={classNames(
         'ds-chip d-inline-flex align-items-center align-middle gap-1',
-        pill ? 'rounded-full' : 'rounded-sm',
+        // 6px per the tags frame in Figma, which is the source of truth.
+        pill ? 'rounded-full' : 'rounded-md',
         VARIANT_UTILITIES[variant],
         `ds-chip--${variant}`,
         {

From 8c173dfc1eb204eea5d9996c70280b0f1e8a9a30 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 10 Sep 2026 17:54:13 -0300
Subject: [PATCH 4/4] refactor(chip): drop the pill prop, one shape for every
 chip

Nothing in the tags frame is fully rounded, and the frame is the source of
truth. `pill` existed only to preserve the `--radius-full` that
StatusBadge.scss carried on main, which had never been checked against the
design system.

So every chip is now 6px. `StatusBadge` and the status/count stories drop the
prop, and `Chip` has no shape axis to get wrong.

`ds-chip__dot` keeps `--radius-full`: it is a 6px circle, not a chip.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../documentation/components/Chip.stories.tsx  | 18 +++++++++---------
 frontend/web/components/base/Chip/Chip.tsx     |  9 +++------
 .../experiments/StatusBadge/StatusBadge.tsx    |  2 +-
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/documentation/components/Chip.stories.tsx b/frontend/documentation/components/Chip.stories.tsx
index 82a39eb344a3..77269719397e 100644
--- a/frontend/documentation/components/Chip.stories.tsx
+++ b/frontend/documentation/components/Chip.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta<typeof Chip> = {
     docs: {
       description: {
         component:
-          'Canonical token-based chip primitive: a small labelled pill token. Layout via Bootstrap utilities, colour/radius via token utilities, padding/sizes/border/truncation in SCSS. Leading/trailing icons go in as children. `variant` covers neutral, accent, the five status colours and `solid`; `pill` gives the fully rounded ends that status and count badges use, and `ChipDot` adds the leading dot in `currentColor`. Selection lives in ToggleChip. The legacy `.chip` (old SCSS vars + manual dark-mode block, ~35×) migrates onto this under #6606.',
+          'Canonical token-based chip primitive: a small labelled pill token. Layout via Bootstrap utilities, colour/radius via token utilities, padding/sizes/border/truncation in SCSS. Leading/trailing icons go in as children. `variant` covers neutral, accent, the five status colours and `solid`; `ChipDot` adds the leading dot in `currentColor`. Radius is a fixed 6px from the tags frame, so there is no shape prop. Selection lives in ToggleChip. The legacy `.chip` (old SCSS vars + manual dark-mode block, ~35×) migrates onto this under #6606.',
       },
     },
     layout: 'centered',
@@ -45,23 +45,23 @@ export const Sizes: Story = {
 export const StatusVariants: Story = {
   render: () => (
     <div className='d-flex align-items-center gap-2'>
-      <Chip variant='info' size='sm' pill>
+      <Chip variant='info' size='sm'>
         <ChipDot />
         Draft
       </Chip>
-      <Chip variant='success' size='sm' pill>
+      <Chip variant='success' size='sm'>
         <ChipDot />
         Running
       </Chip>
-      <Chip variant='warning' size='sm' pill>
+      <Chip variant='warning' size='sm'>
         <ChipDot />
         Paused
       </Chip>
-      <Chip variant='danger' size='sm' pill>
+      <Chip variant='danger' size='sm'>
         <ChipDot />
         Failed
       </Chip>
-      <Chip variant='muted' size='sm' pill>
+      <Chip variant='muted' size='sm'>
         <ChipDot />
         Completed
       </Chip>
@@ -72,13 +72,13 @@ export const StatusVariants: Story = {
 export const Counts: Story = {
   render: () => (
     <div className='d-flex align-items-center gap-2'>
-      <Chip variant='accent' size='xs' pill>
+      <Chip variant='accent' size='xs'>
         5
       </Chip>
-      <Chip variant='neutral' size='xs' pill>
+      <Chip variant='neutral' size='xs'>
         0
       </Chip>
-      <Chip variant='neutral' size='xs' pill>
+      <Chip variant='neutral' size='xs'>
         128
       </Chip>
     </div>
diff --git a/frontend/web/components/base/Chip/Chip.tsx b/frontend/web/components/base/Chip/Chip.tsx
index f6e7b85f6f29..e68d7b2e89f5 100644
--- a/frontend/web/components/base/Chip/Chip.tsx
+++ b/frontend/web/components/base/Chip/Chip.tsx
@@ -19,8 +19,6 @@ export type ChipProps = {
   children: ReactNode
   variant?: ChipVariant
   size?: ChipSize
-  /** Fully rounded ends, for status and count badges. */
-  pill?: boolean
   truncate?: boolean
   onRemove?: () => void
   onClick?: () => void
@@ -66,7 +64,6 @@ const Chip = ({
   onClick,
   onKeyDown,
   onRemove,
-  pill = false,
   ref,
   role,
   size = 'default',
@@ -79,9 +76,9 @@ const Chip = ({
     <span
       ref={ref}
       className={classNames(
-        'ds-chip d-inline-flex align-items-center align-middle gap-1',
-        // 6px per the tags frame in Figma, which is the source of truth.
-        pill ? 'rounded-full' : 'rounded-md',
+        // rounded-md is 6px, fixed by the tags frame in Figma. Not a prop:
+        // every chip is the same shape.
+        'ds-chip d-inline-flex align-items-center align-middle gap-1 rounded-md',
         VARIANT_UTILITIES[variant],
         `ds-chip--${variant}`,
         {
diff --git a/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx b/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
index ae5f56bfc980..d598ba20448b 100644
--- a/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
+++ b/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
@@ -15,7 +15,7 @@ type StatusBadgeProps = {
 }
 
 const StatusBadge: FC<StatusBadgeProps> = ({ status }) => (
-  <Chip variant={STATUS_VARIANTS[status]} size='sm' pill>
+  <Chip variant={STATUS_VARIANTS[status]} size='sm'>
     <ChipDot />
     {EXPERIMENT_STATUS_LABELS[status]}
   </Chip>