diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..59dd41b
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,55 @@
+# Changelog
+
+## 2.5.0
+
+### Changed — Button / ButtonDropdown minimum widths
+
+**`Button` now has a `min-w-[150px]` floor — but only for labeled buttons at the default size.**
+
+The floor applies when **both** are true:
+
+-   the button has a non-empty `label` (icon-only buttons are exempt), and
+-   no explicit `size="xs"` or `size="sm"` is passed. Passing `size="xs"`/`size="sm"` is
+    treated as a deliberate compaction and opts out of the floor. Omitting `size` (which
+    still resolves to the `sm` visual style) or passing `md`/`lg`/`xl` keeps the floor.
+
+**`ButtonDropdown` now has a 150px minimum _total_ width** (button portion + divider +
+trigger, previously an unreleased 114px floor on the button portion alone). The floor
+lives on the wrapper; the button portion `grow`s to fill it. `IButtonDropdownProps`
+gains a wrapper-level `className` prop (merged last).
+
+**Class conflicts now resolve in favour of consumer classes.** Both components run
+their final class list through [`tailwind-merge`](https://github.com/dcastil/tailwind-merge)
+(new dependency), with your `className` merged last. No `!important` is used for the
+new widths.
+
+### Migration / override recipes
+
+Audit call sites for anything that must stay narrower than 150px:
+
+-   **Icon-only `Button`** (`label=""` + icon, `w-[30px]`, `w-7`, etc.): no change needed —
+    the floor never applies without a label.
+-   **Compact toolbar `Button`s** that already pass `size="sm"`/`size="xs"`: no change
+    needed — explicit small sizes are exempt.
+-   **Any other `Button` that must be narrower**: pass `className="min-w-0"` (or any
+    `min-w-*` of your choosing) — consumer `min-w-*`/`max-w-*` always wins over the
+    default via tailwind-merge.
+-   **`ButtonDropdown` that must be narrower than 150px total**: pass the new wrapper
+    prop `className="min-w-0"`. Existing `button.className` values such as
+    `"max-w-[122px]"` continue to cap the button portion and now reliably win over the
+    internal defaults (they are merged after them). Recommended compact recipe:
+
+    ```tsx
+    <ButtonDropdown
+        className="min-w-0"
+        button={{ label: "New Page", size: "sm", className: "max-w-[122px]" }}
+        dropDown={...}
+    />
+    ```
+
+### Notes
+
+-   Without a wrapper `min-w-0`, a `button.className` max-width caps the button portion
+    but the control still reserves 150px total — pass both when space is tight.
+-   The `asLink` render branch gets the same conditional floor and tailwind-merge
+    behaviour as the `<button>` branch.
diff --git a/package.json b/package.json
index 71f5074..56c09df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.4.1",
+	"version": "2.5.0",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -47,6 +47,7 @@
 		"npm-dts": "^1.3.12",
 		"npm-run-all": "^4.1.5",
 		"postcss": "^8.4.21",
+		"tailwind-merge": "^2.6.0",
 		"tailwindcss": "^3.2.4",
 		"typescript": "^5.1.6"
 	},
diff --git a/stories/atoms/buttons/Button/Button.tsx b/stories/atoms/buttons/Button/Button.tsx
index f565623..1455cd1 100644
--- a/stories/atoms/buttons/Button/Button.tsx
+++ b/stories/atoms/buttons/Button/Button.tsx
@@ -1,4 +1,5 @@
 import { default as cn } from "classnames";
+import { twMerge } from "tailwind-merge";
 import React, { HTMLAttributeAnchorTarget, forwardRef } from "react";
 import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons";
 
@@ -8,7 +9,7 @@ export interface IButtonProps
 	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType?: BTNActionType;
-	/** How lg should the button be? - Defaults to 'base'. */
+	/** How lg should the button be? - Defaults to 'sm'. Explicitly passing "xs" or "sm" also opts the button out of the default min-w-[150px] floor. */
 	size?: "xs" | "sm" | "md" | "lg" | "xl";
 	/** The Button's text content. */
 	label: string;
@@ -38,7 +39,7 @@ export interface IButtonProps
 const _Button = (
 	{
 		actionType = "primary",
-		size = "sm",
+		size,
 		label,
 		icon,
 		iconObj,
@@ -53,6 +54,10 @@ const _Button = (
 	}: IButtonProps,
 	ref: React.LegacyRef<HTMLButtonElement>
 ) => {
+	const resolvedSize = size ?? "sm";
+	// The 150px floor only applies to labeled buttons that haven't explicitly opted into a
+	// compact size — icon-only buttons and explicit size="xs"/"sm" call sites keep their own width.
+	const applyMinWidth = !!label && size !== "xs" && size !== "sm";
 	let iconStyles = cn(
 		{ "text-white h-5 w-5 stroke-[1.5]": actionType === "primary" || actionType === "danger" },
 		{ "text-purple-700 h-5 w-5 stroke-[1.5]": actionType === "secondary" },
@@ -71,7 +76,11 @@ const _Button = (
 		{ "border-red-800 border-r-white": actionType === "danger" },
 		{ "border-yellow-800 border-r-transparent-black-70": actionType === "warning" }
 	);
-	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" });
+	const loaderSize = cn(
+		{ "h-4 w-4": resolvedSize === "sm" },
+		{ "h-5 w-5": resolvedSize === "md" },
+		{ "h-6 w-6 ": resolvedSize === "lg" }
+	);
 
 	return asLink ? (
 		//@ts-ignore
@@ -80,35 +89,38 @@ const _Button = (
 				href: asLink.href,
 				target: asLink.target,
 				title: asLink.title,
-				className: cn(
-					"inline-flex items-center justify-center gap-x-2  font rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
-					{ "w-full": fullWidth },
-					{ "px-[11px] py-[7px] text-xs": size === "xs" },
-					{ "px-[13px] py-[9px] text-sm": size === "sm" },
-					{ "px-[17px] py-[9px] text-sm": size === "md" },
-					{ "px-[17px] py-[9px] text-base": size === "lg" },
-					{ "px-[25px] py-[13px] text-base": size === "xl" },
-					{
-						"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:hover:bg-violet-400 disabled:focus-visible:ring-0":
-							actionType === "primary"
-					},
-					{
-						" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:hover:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
-							actionType === "secondary"
-					},
-					{
-						"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
-							actionType === "alternative"
-					},
-					{
-						" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
-							actionType === "danger"
-					},
-					{
-						" bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 <focus-visible:!></focus-visible:!>ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-400 disabled:hover:bg-yellow-400 disabled:text-transparent-black-70 disabled:focus-visible:ring-0":
-							actionType === "warning"
-					},
-					className ? className : ""
+				className: twMerge(
+					cn(
+						"inline-flex items-center justify-center gap-x-2  font rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+						{ "min-w-[150px]": applyMinWidth },
+						{ "w-full": fullWidth },
+						{ "px-[11px] py-[7px] text-xs": resolvedSize === "xs" },
+						{ "px-[13px] py-[9px] text-sm": resolvedSize === "sm" },
+						{ "px-[17px] py-[9px] text-sm": resolvedSize === "md" },
+						{ "px-[17px] py-[9px] text-base": resolvedSize === "lg" },
+						{ "px-[25px] py-[13px] text-base": resolvedSize === "xl" },
+						{
+							"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:hover:bg-violet-400 disabled:focus-visible:ring-0":
+								actionType === "primary"
+						},
+						{
+							" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:hover:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+								actionType === "secondary"
+						},
+						{
+							"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
+								actionType === "alternative"
+						},
+						{
+							" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+								actionType === "danger"
+						},
+						{
+							" bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 <focus-visible:!></focus-visible:!>ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-400 disabled:hover:bg-yellow-400 disabled:text-transparent-black-70 disabled:focus-visible:ring-0":
+								actionType === "warning"
+						},
+						className ? className : ""
+					)
 				),
 				onClick: props.onClick
 			}}
@@ -160,39 +172,42 @@ const _Button = (
 	) : (
 		<button
 			type="button"
-			className={cn(
-				" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all h-9",
-				{ "w-full": fullWidth },
-				{ "text-xs": size === "xs" },
-				{ "text-sm": size === "sm" },
-				{ "text-sm": size === "md" },
-				{ "text-base": size === "lg" },
-				{ "text-base": size === "xl" },
-				{
-					"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:hover:bg-violet-400 disabled:focus-visible:ring-0":
-						actionType === "primary"
-				},
-				{
-					" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:hover:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
-						actionType === "secondary"
-				},
-				{
-					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
-						actionType === "alternative"
-				},
-				{
-					"bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
-						actionType === "danger"
-				},
-				{
-					"border-gray-300 border bg-white text-red-600 hover:bg-red-50 focus-visible:!ring-red-500 focus:!ring-red-500 active:bg-red-100 active:ring-red-500 focus-within:!ring-red-500 disabled:bg-white disabled:hover:bg-white disabled:text-red-300 disabled:!ring-0 disabled:focus-visible:ring-0":
-						actionType === "danger-secondary"
-				},
-				{
-					"bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-300 disabled:hover:bg-yellow-300 disabled:text-transparent-black-30 disabled:focus-visible:ring-0":
-						actionType === "warning"
-				},
-				className ? className : ""
+			className={twMerge(
+				cn(
+					" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all h-9",
+					{ "min-w-[150px]": applyMinWidth },
+					{ "w-full": fullWidth },
+					{ "text-xs": resolvedSize === "xs" },
+					{ "text-sm": resolvedSize === "sm" },
+					{ "text-sm": resolvedSize === "md" },
+					{ "text-base": resolvedSize === "lg" },
+					{ "text-base": resolvedSize === "xl" },
+					{
+						"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:hover:bg-violet-400 disabled:focus-visible:ring-0":
+							actionType === "primary"
+					},
+					{
+						" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:hover:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+							actionType === "secondary"
+					},
+					{
+						"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
+							actionType === "alternative"
+					},
+					{
+						"bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+							actionType === "danger"
+					},
+					{
+						"border-gray-300 border bg-white text-red-600 hover:bg-red-50 focus-visible:!ring-red-500 focus:!ring-red-500 active:bg-red-100 active:ring-red-500 focus-within:!ring-red-500 disabled:bg-white disabled:hover:bg-white disabled:text-red-300 disabled:!ring-0 disabled:focus-visible:ring-0":
+							actionType === "danger-secondary"
+					},
+					{
+						"bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-300 disabled:hover:bg-yellow-300 disabled:text-transparent-black-30 disabled:focus-visible:ring-0":
+							actionType === "warning"
+					},
+					className ? className : ""
+				)
 			)}
 			ref={ref}
 			{...props}
diff --git a/stories/atoms/buttons/Button/MinWidth/MinWidth.stories.ts b/stories/atoms/buttons/Button/MinWidth/MinWidth.stories.ts
new file mode 100644
index 0000000..2b29723
--- /dev/null
+++ b/stories/atoms/buttons/Button/MinWidth/MinWidth.stories.ts
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "../Button";
+
+// Stories documenting the min-width behaviour introduced in v2.5:
+// labeled buttons at the default size get a 150px floor; icon-only buttons,
+// explicit size="xs"/"sm" buttons, and consumers passing their own min-w-* do not.
+const meta: Meta<typeof Button> = {
+	title: "Design System/atoms/Buttons/Button/Min Width",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/** A labeled button with no explicit size gets the 150px min-width floor. */
+export const LabeledDefaultSize: Story = {
+	args: {
+		actionType: "primary",
+		label: "Save"
+	}
+};
+
+/** An icon-only button (no label) is exempt from the floor and can be sized freely. */
+export const IconOnly: Story = {
+	args: {
+		actionType: "alternative",
+		label: "",
+		icon: "IconDots",
+		className: "w-[30px] !px-1"
+	}
+};
+
+/** Explicitly passing size="sm" opts out of the floor — compact toolbars keep their width. */
+export const ExplicitSmall: Story = {
+	args: {
+		actionType: "secondary",
+		label: "Compact",
+		size: "sm",
+		className: "!px-3"
+	}
+};
+
+/** Explicitly passing size="xs" also opts out of the floor. */
+export const ExplicitExtraSmall: Story = {
+	args: {
+		actionType: "secondary",
+		label: "Tiny",
+		size: "xs",
+		className: "!px-3"
+	}
+};
+
+/** Consumer classes win: min-w-0 (or any min-w-*) removes the floor via tailwind-merge. */
+export const ConsumerMinWidthOverride: Story = {
+	args: {
+		actionType: "primary",
+		label: "Override",
+		className: "min-w-0"
+	}
+};
+
+/** Larger explicit sizes (md/lg/xl) keep the floor. */
+export const MediumKeepsFloor: Story = {
+	args: {
+		actionType: "primary",
+		label: "Medium",
+		size: "md"
+	}
+};
diff --git a/stories/atoms/buttons/Button/tests/Button.test.tsx b/stories/atoms/buttons/Button/tests/Button.test.tsx
index 4806ad5..9d171aa 100644
--- a/stories/atoms/buttons/Button/tests/Button.test.tsx
+++ b/stories/atoms/buttons/Button/tests/Button.test.tsx
@@ -67,6 +67,46 @@ describe("<Button>", () => {
 		});
 	});
 
+	describe("min-width floor", () => {
+		it("applies min-w-[150px] to a labeled button with no explicit size", () => {
+			render(<Button {...defaultProps} />);
+
+			expect(screen.getByRole("button")).toHaveClass("min-w-[150px]");
+		});
+
+		it("applies min-w-[150px] at explicit size md", () => {
+			render(<Button {...defaultProps} size="md" />);
+
+			expect(screen.getByRole("button")).toHaveClass("min-w-[150px]");
+		});
+
+		it("does not apply to an icon-only button (no label)", () => {
+			render(<Button label="" icon="IconDots" />);
+
+			expect(screen.getByRole("button")).not.toHaveClass("min-w-[150px]");
+		});
+
+		it("does not apply at explicit size sm", () => {
+			render(<Button {...defaultProps} size="sm" />);
+
+			expect(screen.getByRole("button")).not.toHaveClass("min-w-[150px]");
+		});
+
+		it("does not apply at explicit size xs", () => {
+			render(<Button {...defaultProps} size="xs" />);
+
+			expect(screen.getByRole("button")).not.toHaveClass("min-w-[150px]");
+		});
+
+		it("is overridden by a consumer min-w-* class", () => {
+			render(<Button {...defaultProps} className="min-w-0" />);
+
+			const buttonElement = screen.getByRole("button");
+			expect(buttonElement).not.toHaveClass("min-w-[150px]");
+			expect(buttonElement).toHaveClass("min-w-0");
+		});
+	});
+
 	it("calls onClick when clicked", () => {
 		const handleClick = vi.fn();
 		render(<Button {...defaultProps} onClick={handleClick} />);
diff --git a/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx b/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx
index 75a3113..0d255a6 100644
--- a/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx
+++ b/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx
@@ -151,6 +151,41 @@ export const DisabledSecondary: Story = {
 	}
 };
 
+/** Default width behaviour: the whole control (button + divider + trigger) has a 150px min TOTAL width. */
+export const DefaultMinTotalWidth: Story = {
+	args: {
+		button: {
+			label: "Go",
+			actionType: "primary"
+		},
+		dropDown: {
+			items: dropdownDataWithIcons,
+			label: "Dropdown",
+			id: "dropdown-min-total-width"
+		},
+		placement: "bottom-end"
+	}
+};
+
+/** Compact override: wrapper min-w-0 removes the 150px total floor, and consumer button.className max-w-* caps the button portion. */
+export const CompactOverride: Story = {
+	args: {
+		button: {
+			label: "New Page",
+			actionType: "secondary",
+			size: "sm",
+			className: "max-w-[122px]"
+		},
+		dropDown: {
+			items: dropdownDataWithIcons,
+			label: "Dropdown",
+			id: "dropdown-compact-override"
+		},
+		className: "min-w-0",
+		placement: "bottom-end"
+	}
+};
+
 export const DisabledAlternative: Story = {
 	args: {
 		button: {
diff --git a/stories/organisms/ButtonDropdown/ButtonDropdown.tsx b/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
index d1f9c04..1c2c3e0 100644
--- a/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
+++ b/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { default as cn } from "classnames";
+import { twMerge } from "tailwind-merge";
 import Button, { IButtonProps } from "@/stories/atoms/buttons/Button";
 import { DynamicIcon } from "@/stories/atoms/icons";
 import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponent";
@@ -10,6 +11,8 @@ export interface IButtonDropdownProps {
 	hideDivider?: boolean;
 	placement?: IDropdownProps["placement"];
 	offsetOptions?: IDropdownProps["offsetOptions"];
+	/** Classes applied to the wrapper div (merged last) — e.g. pass "min-w-0" to opt out of the 150px total-width floor. */
+	className?: string;
 }
 
 /**
@@ -20,7 +23,8 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 	dropDown,
 	hideDivider = false,
 	placement = "bottom-end",
-	offsetOptions
+	offsetOptions,
+	className
 }) => {
 	const iconTextColours = {
 		primary: dropDown.disabled ? "text-gray-300" : "text-violet-100",
@@ -29,14 +33,27 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 	};
 
 	return (
-		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
+		<div
+			className={twMerge(
+				// min-w-[150px] is the floor for the WHOLE control (button portion + divider + trigger);
+				// the button portion grows to fill it. Consumer className is merged last so min-w-0 opts out.
+				"inline-flex items-stretch rounded-[3px] min-w-[150px]",
+				className
+			)}
+		>
 			<Button
 				{...{
 					...button,
-					className: cn(
-						button.className,
-						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0",
-						"border-r-transparent"
+					className: twMerge(
+						// The Button keeps its own standard focus ring (2px, offset 2), matching the trigger's below.
+						cn(
+							"grow min-w-0 !rounded-r-none !border-r-0 hover:!border-r-0",
+							// While focused, lift the button above the divider/trigger so the right
+							// side of its ring isn't painted under them.
+							"relative focus:z-10 focus-visible:z-10 focus-within:z-10 active:z-10",
+							"border-r-transparent"
+						),
+						button.className
 					)
 				}}
 			/>
@@ -59,13 +76,12 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 							{...{
 								icon: "IconChevronDown",
 								className: cn(
-									"h-5 w-5 disabled:!bg-gray-50 disabled:focus-visible:ring-0",
+									"h-5 w-5 stroke-1 disabled:!bg-gray-50 disabled:focus-visible:ring-0",
 									{
-										"text-white": dropDown.disabled && button.actionType === "primary",
+										"text-white": button.actionType === "primary",
 										"text-purple-300": dropDown.disabled && button.actionType === "secondary",
 										"text-gray-300": dropDown.disabled && button.actionType === "alternative",
 
-										"text-violet-100": !dropDown.disabled && button.actionType === "primary",
 										"text-purple-700": !dropDown.disabled && button.actionType === "secondary",
 										"text-gray-700": !dropDown.disabled && button.actionType === "alternative"
 									},
@@ -76,6 +92,11 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 					),
 					buttonClassname: cn(
 						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+						// Focus ring for the trigger only, matching Button's ring style (2px, offset 2). !outline-none
+						// beats the outline-purple-500 in the Dropdown's defaultClassNames (plain cn, no twMerge).
+						// relative keeps it in the same paint phase as the (relative) button, so its ring's
+						// left edge isn't painted under the button; z-10 on focus lifts it fully on top.
+						"!outline-none !ring-offset-white focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 relative focus:z-10 focus-visible:z-10",
 						button.actionType === "primary"
 							? cn(
 									"border-violet-700 bg-violet-800  !text-white  hover:border-violet-700 hover:bg-violet-700 active:!border-violet-800 active:bg-violet-800 fill-white",
diff --git a/stories/organisms/DropdownComponent/DropdownComponent.tsx b/stories/organisms/DropdownComponent/DropdownComponent.tsx
index 177d18e..19ae25a 100644
--- a/stories/organisms/DropdownComponent/DropdownComponent.tsx
+++ b/stories/organisms/DropdownComponent/DropdownComponent.tsx
@@ -67,7 +67,7 @@ export const defaultClassNames = {
 	activeItemClassname: "block px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 hover:text-gray-900",
 	buttonClassname:
 		"py-[2px] flex items-center  rounded outline-purple-500 transition-all text-gray-400 hover:text-gray-600 ",
-	iconClassname: "ml-1 h-5 w-6",
+	iconClassname: "ml-1 h-5 w-6 stroke-1",
 	iconSpacingClassname: "flex items-center gap-x-2",
 	dividerClassname: "border-b border-b-gray-100"
 };
diff --git a/yarn.lock b/yarn.lock
index 34317f6..5c13ce0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3798,62 +3798,62 @@
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.14.2"
 
-"@vitest/expect@2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.8.tgz#13fad0e8d5a0bf0feb675dcf1d1f1a36a1773bc1"
-  integrity sha512-8ytZ/fFHq2g4PJVAtDX57mayemKgDR6X3Oa2Foro+EygiOJHUXhCqBAAKQYYajZpFoIfvBCF1j6R6IYRSIUFuw==
+"@vitest/expect@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.9.tgz#b566ea20d58ea6578d8dc37040d6c1a47ebe5ff8"
+  integrity sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==
   dependencies:
-    "@vitest/spy" "2.1.8"
-    "@vitest/utils" "2.1.8"
+    "@vitest/spy" "2.1.9"
+    "@vitest/utils" "2.1.9"
     chai "^5.1.2"
     tinyrainbow "^1.2.0"
 
-"@vitest/mocker@2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.8.tgz#51dec42ac244e949d20009249e033e274e323f73"
-  integrity sha512-7guJ/47I6uqfttp33mgo6ga5Gr1VnL58rcqYKyShoRK9ebu8T5Rs6HN3s1NABiBeVTdWNrwUMcHH54uXZBN4zA==
+"@vitest/mocker@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.9.tgz#36243b27351ca8f4d0bbc4ef91594ffd2dc25ef5"
+  integrity sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==
   dependencies:
-    "@vitest/spy" "2.1.8"
+    "@vitest/spy" "2.1.9"
     estree-walker "^3.0.3"
     magic-string "^0.30.12"
 
-"@vitest/pretty-format@2.1.8", "@vitest/pretty-format@^2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.8.tgz#88f47726e5d0cf4ba873d50c135b02e4395e2bca"
-  integrity sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==
+"@vitest/pretty-format@2.1.9", "@vitest/pretty-format@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.9.tgz#434ff2f7611689f9ce70cd7d567eceb883653fdf"
+  integrity sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==
   dependencies:
     tinyrainbow "^1.2.0"
 
-"@vitest/runner@2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.8.tgz#b0e2dd29ca49c25e9323ea2a45a5125d8729759f"
-  integrity sha512-17ub8vQstRnRlIU5k50bG+QOMLHRhYPAna5tw8tYbj+jzjcspnwnwtPtiOlkuKC4+ixDPTuLZiqiWWQ2PSXHVg==
+"@vitest/runner@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.9.tgz#cc18148d2d797fd1fd5908d1f1851d01459be2f6"
+  integrity sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==
   dependencies:
-    "@vitest/utils" "2.1.8"
+    "@vitest/utils" "2.1.9"
     pathe "^1.1.2"
 
-"@vitest/snapshot@2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.8.tgz#d5dc204f4b95dc8b5e468b455dfc99000047d2de"
-  integrity sha512-20T7xRFbmnkfcmgVEz+z3AU/3b0cEzZOt/zmnvZEctg64/QZbSDJEVm9fLnnlSi74KibmRsO9/Qabi+t0vCRPg==
+"@vitest/snapshot@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.9.tgz#24260b93f798afb102e2dcbd7e61c6dfa118df91"
+  integrity sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==
   dependencies:
-    "@vitest/pretty-format" "2.1.8"
+    "@vitest/pretty-format" "2.1.9"
     magic-string "^0.30.12"
     pathe "^1.1.2"
 
-"@vitest/spy@2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.8.tgz#bc41af3e1e6a41ae3b67e51f09724136b88fa447"
-  integrity sha512-5swjf2q95gXeYPevtW0BLk6H8+bPlMb4Vw/9Em4hFxDcaOxS+e0LOX4yqNxoHzMR2akEB2xfpnWUzkZokmgWDg==
+"@vitest/spy@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.9.tgz#cb28538c5039d09818b8bfa8edb4043c94727c60"
+  integrity sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==
   dependencies:
     tinyspy "^3.0.2"
 
-"@vitest/utils@2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.8.tgz#f8ef85525f3362ebd37fd25d268745108d6ae388"
-  integrity sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==
+"@vitest/utils@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.9.tgz#4f2486de8a54acf7ecbf2c5c24ad7994a680a6c1"
+  integrity sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==
   dependencies:
-    "@vitest/pretty-format" "2.1.8"
+    "@vitest/pretty-format" "2.1.9"
     loupe "^3.1.2"
     tinyrainbow "^1.2.0"
 
@@ -7528,11 +7528,6 @@ inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, i
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-inherits@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
-
 ini@^1.3.4, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
@@ -9725,14 +9720,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-path@^0.12.7:
-  version "0.12.7"
-  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
-  integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==
-  dependencies:
-    process "^0.11.1"
-    util "^0.10.3"
-
 pathe@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
@@ -10038,7 +10025,7 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@^0.11.1, process@^0.11.10:
+process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
@@ -10287,11 +10274,6 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
-react-icons@^4.10.1:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"
-  integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==
-
 react-is@18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
@@ -11488,6 +11470,11 @@ tabbable@^6.0.0, tabbable@^6.0.1:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
+tailwind-merge@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.6.1.tgz#a9d58240f664d21c33c379a092d9a273f833443b"
+  integrity sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==
+
 tailwindcss@^3.2.4:
   version "3.4.16"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.16.tgz#35a7c3030844d6000fc271878db4096b6a8d2ec9"
@@ -12134,13 +12121,6 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-util@^0.10.3:
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
-  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
-  dependencies:
-    inherits "2.0.3"
-
 util@^0.12.4, util@^0.12.5:
   version "0.12.5"
   resolved "https://registry.yarnpkg.com/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc"
@@ -12194,10 +12174,10 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
-vite-node@2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.8.tgz#9495ca17652f6f7f95ca7c4b568a235e0c8dbac5"
-  integrity sha512-uPAwSr57kYjAUux+8E2j0q0Fxpn8M9VoyfGiRI8Kfktz9NcYMCenwY5RnZxnF1WTu3TGiYipirIzacLL3VVGFg==
+vite-node@2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.9.tgz#549710f76a643f1c39ef34bdb5493a944e4f895f"
+  integrity sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==
   dependencies:
     cac "^6.7.14"
     debug "^4.3.7"
@@ -12216,18 +12196,18 @@ vite@^5.0.0:
   optionalDependencies:
     fsevents "~2.3.3"
 
-vitest@^2.1.5:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.8.tgz#2e6a00bc24833574d535c96d6602fb64163092fa"
-  integrity sha512-1vBKTZskHw/aosXqQUlVWWlGUxSJR8YtiyZDJAFeW2kPAeX6S3Sool0mjspO+kXLuxVWlEDDowBAeqeAQefqLQ==
-  dependencies:
-    "@vitest/expect" "2.1.8"
-    "@vitest/mocker" "2.1.8"
-    "@vitest/pretty-format" "^2.1.8"
-    "@vitest/runner" "2.1.8"
-    "@vitest/snapshot" "2.1.8"
-    "@vitest/spy" "2.1.8"
-    "@vitest/utils" "2.1.8"
+vitest@^2.1.4:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.9.tgz#7d01ffd07a553a51c87170b5e80fea3da7fb41e7"
+  integrity sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==
+  dependencies:
+    "@vitest/expect" "2.1.9"
+    "@vitest/mocker" "2.1.9"
+    "@vitest/pretty-format" "^2.1.9"
+    "@vitest/runner" "2.1.9"
+    "@vitest/snapshot" "2.1.9"
+    "@vitest/spy" "2.1.9"
+    "@vitest/utils" "2.1.9"
     chai "^5.1.2"
     debug "^4.3.7"
     expect-type "^1.1.0"
@@ -12239,7 +12219,7 @@ vitest@^2.1.5:
     tinypool "^1.0.1"
     tinyrainbow "^1.2.0"
     vite "^5.0.0"
-    vite-node "2.1.8"
+    vite-node "2.1.9"
     why-is-node-running "^2.3.0"
 
 vm-browserify@^1.1.2: