fix: Badge label will no longer wrap

src/core/badge/badge.stories.tsx

@@ -163,3 +163,21 @@ export const Colours: Story = {
     iconLeft: 'Star',
   },
 }
+
+/**
+ * If there is insufficient space available for the badge's label to be fully displayed, it will
+ * not wrap. It is up to the parent container to decide whether the overflow should be visible or not.
+ */
+export const Overflow: Story = {
+  args: {
+    ...Example.args,
+    children: 'A very long label that will overflow',
+  },
+  decorators: [
+    (Story: any) => (
+      <div style={{ boxSizing: 'content-box', border: '1px solid #FA00FF', width: '100px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}

src/core/badge/styles.ts

@@ -21,12 +21,14 @@ interface ElBadgeProps {
 }
 
 export const ElBadge = styled.span<ElBadgeProps>`
-  display: inline-flex;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--spacing-half);
+
   height: var(--size-5);
   padding-block: var(--spacing-half);
   padding-inline: var(--spacing-1);
-  align-items: center;
-  gap: var(--spacing-half);
   border-radius: var(--comp-badge-border-radius);
 
   /* NOTE: necessary when used in an inline or inline-block layout */
@@ -40,18 +42,19 @@ function generateElBadgeColourStyles(colour: BadgeColour) {
     &[data-colour='${colour}'][data-variant='default'] {
       background: var(--comp-badge-colour-fill-default-${colour});
     }
-    
+
     &[data-colour='${colour}'][data-variant='reversed'] {
       background: var(--comp-badge-colour-fill-reversed-${colour});
     }
   `
 }
 
 export const ElBadgeLabelContainer = styled.span`
-  padding-inline: var(--spacing-half);
-
   ${font('xs', 'medium')}
 
+  white-space: nowrap;
+  padding-inline: var(--spacing-half);
+
   ${badgeColours.map((colour) => generateElBadgeLabelColourStyles(colour)).join('\n')};
 `
 

src/storybook/changelog.mdx

@@ -25,6 +25,7 @@ Beta versions should be relatively stable but subject to occssional breaking cha
 - **chore!:** Refactored `EmptyData`. `EmptyData.SecondaryDescription` removed; the secondary text can now be supplied as a prop on `EmptyData.Description`. Added `EmptyData.Action` for `<a>`-based actions. Both `EmptyData.Action` and `EmptyData.ActionButton` are now based on `Button`.
 - **chore:** Update design tokens to match latest updates in Figma.
 - **feat:** `Text` now supports an `overflow="truncate"` prop that assists with text truncation.
+- **fix:** `Badge` label no longer wraps when it has insufficient space.
 
 ### **5.0.0-beta.45 - 18/09/25**