From d380fc396986bc1f5dbc8f8a19d219940f52eb9a Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 31 Mar 2026 17:26:19 +0200
Subject: [PATCH 1/4] add test for problem

---
 src/components/Badge/Badge.test.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/components/Badge/Badge.test.tsx

diff --git a/src/components/Badge/Badge.test.tsx b/src/components/Badge/Badge.test.tsx
new file mode 100644
index 000000000..a6d16f3f8
--- /dev/null
+++ b/src/components/Badge/Badge.test.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { IconButton } from "../../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+describe("Badge", () => {
+    it("should render badge markup with correct content when used on an icon button", () => {
+        const { container } = render(<IconButton name="item-info" badge={"badge content"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("badge content");
+    });
+    it("should render badge markup with correct content when batch displays a 0 (zero) number on an icon button", () => {
+        const { container } = render(<IconButton name="item-info" badge={0} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("0");
+    });
+});

From 9ac8f1df7f0a9a1242c69d37b1d06dbdc0fb903b Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 31 Mar 2026 17:29:26 +0200
Subject: [PATCH 2/4] fix condition to show badge correctly

---
 CHANGELOG.md                     | 2 ++
 src/components/Button/Button.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1dc0cbf9c..bfd0b1c67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<MultiSuggestField />`
     -   `onSelection` now sets `newlySelected` only for add actions and no longer sets it to the last element
     -   border of the BlueprintJS `Tag` elements were fixed
+-   `<Button />`
+    -   badge is correctly displayed when `badge={0}`
 -   Focus outlines
     -   we use again bold focus outlines for input elements
     -   they are also used for clickable elements that are focused via keyboard (tab navigation)
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 7110d1c33..153f4adab 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -113,7 +113,7 @@ export const Button = ({
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
         >
             {children}
-            {badge && (
+            {typeof badge !== "undefined" && (
                 <Badge
                     children={badge}
                     {...constructBadgeProperties({

From 40885d314af7358520ec794e3f29870517a376a1 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 31 Mar 2026 17:48:57 +0200
Subject: [PATCH 3/4] move badge property test to Button tests, add tests for
 Badge maxLength

---
 src/components/Badge/Badge.test.tsx   | 20 ++++++++++----------
 src/components/Button/Button.test.tsx | 14 ++++++++++++++
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/Badge/Badge.test.tsx b/src/components/Badge/Badge.test.tsx
index a6d16f3f8..b3f5a0a9b 100644
--- a/src/components/Badge/Badge.test.tsx
+++ b/src/components/Badge/Badge.test.tsx
@@ -3,20 +3,20 @@ import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
-import { IconButton } from "../../../index";
+import { Badge } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 describe("Badge", () => {
-    it("should render badge markup with correct content when used on an icon button", () => {
-        const { container } = render(<IconButton name="item-info" badge={"badge content"} />);
-        const badge = container.querySelector(`.${eccgui}-badge`);
+    it("should shorten a number badge exceeding maxLength to a 9+ notation", () => {
+        const { container } = render(<Badge maxLength={2}>{42}</Badge>);
+        const badge = container.querySelector(`.${eccgui}-badge__tag`);
         expect(badge).not.toBeNull();
-        expect(badge).toHaveTextContent("badge content");
+        expect(badge).toHaveTextContent("9+");
     });
-    it("should render badge markup with correct content when batch displays a 0 (zero) number on an icon button", () => {
-        const { container } = render(<IconButton name="item-info" badge={0} />);
-        const badge = container.querySelector(`.${eccgui}-badge`);
-        expect(badge).not.toBeNull();
-        expect(badge).toHaveTextContent("0");
+    it("should apply maxWidth style to a string badge when maxLength is set", () => {
+        const { container } = render(<Badge maxLength={4}>forty two</Badge>);
+        const tag = container.querySelector(`.${eccgui}-badge__tag`);
+        expect(tag).not.toBeNull();
+        expect((tag as HTMLElement).style.maxWidth).toBe("calc((3em + 3ch)/2)");
     });
 });
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index bc5763631..c80f41981 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Icon from "../Icon/Icon";
 
 import Button from "./Button";
@@ -33,4 +34,17 @@ describe("Button", () => {
         expect(screen.getByRole("button").firstChild).toEqual(screen.getByText(/right icon/i));
         expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
     });
+
+    it("should render badge markup with correct content when used on an icon button", () => {
+        const { container } = render(<Button name="item-info" badge={"badge content"} text={"Cation label"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("badge content");
+    });
+    it("should render badge markup with correct content when batch displays a 0 (zero) number on an icon button", () => {
+        const { container } = render(<Button name="item-info" badge={0} text={"Cation label"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("0");
+    });
 });

From 7e1186ed1ba13558e26c998000c2920ddea155b6 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 31 Mar 2026 17:54:34 +0200
Subject: [PATCH 4/4] use class prefix constant to create class names in Button
 tests

---
 src/components/Button/Button.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index c80f41981..af853a11d 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -22,7 +22,7 @@ describe("Button", () => {
             </Button>
         );
         expect(screen.getByRole("button").lastChild).toEqual(screen.getByText(/left icon/i));
-        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+        expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
     });
 
     it("should have icon at the right after the text", () => {
@@ -32,7 +32,7 @@ describe("Button", () => {
             </Button>
         );
         expect(screen.getByRole("button").firstChild).toEqual(screen.getByText(/right icon/i));
-        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+        expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
     });
 
     it("should render badge markup with correct content when used on an icon button", () => {