@edux-design/buttons 0.0.6 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.0.6",
+  "version": "0.1.1",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -29,8 +29,10 @@
     "@tailwindcss/postcss": "^4.1.12"
   },
   "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
     "@edux-design/utils": "*"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   }
 }

package/src/demo/Button.stories.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button, IconButton } from "./../index";
-import { Close } from "@edux-design/icons";
+import { Close, External, Warning } from "@edux-design/icons";
 
 export default {
   title: "Components/Button",
@@ -15,6 +15,8 @@ export default {
     isBare: { control: "boolean" },
     isStretched: { control: "boolean" },
     disabled: { control: "boolean" },
+    startIcon: { control: false },
+    endIcon: { control: false },
     children: { control: "text" },
   },
 };
@@ -48,6 +50,13 @@ Bare.args = {
   isBare: true,
 };
 
+export const DangerBare = Template.bind({});
+DangerBare.args = {
+  children: "Log out",
+  isBare: true,
+  isDanger: true,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   children: "Disabled",
@@ -82,3 +91,13 @@ export const Default = () => (
     <IconButton icon={<Close />} disabled aria-label="Disabled" />
   </div>
 );
+
+export const WithIcons = () => (
+  <div className="flex gap-4 items-center">
+    <Button startIcon={<Warning />}>Start icon</Button>
+    <Button endIcon={<External />}>End icon</Button>
+    <Button isDanger isBare endIcon={<External />}>
+      Log out
+    </Button>
+  </div>
+);

package/src/elements/Button.jsx

@@ -9,6 +9,8 @@ import { cx } from "@edux-design/utils";
  *
  * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *   children?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
  *   size?: "small"|"medium"|"large",
  *   isSecondary?: boolean,
  *   isDanger?: boolean,
@@ -39,6 +41,8 @@ export const Button = forwardRef(
   (
     {
       children,
+      startIcon,
+      endIcon,
       size = "medium",
       isSecondary,
       isDanger,
@@ -51,15 +55,23 @@ export const Button = forwardRef(
     ref
   ) => {
     let variant = "primary";
-    if (isBare) variant = "bare";
-    if (isSecondary) variant = "secondary";
-    if (isDanger) variant = "danger";
-    if (disabled) variant = "disabled";
+    if (disabled) {
+      variant = "disabled";
+    } else if (isDanger && isBare) {
+      variant = "dangerBare";
+    } else if (isDanger) {
+      variant = "danger";
+    } else if (isSecondary) {
+      variant = "secondary";
+    } else if (isBare) {
+      variant = "bare";
+    }
 
     // handle conflicting props - the last bool wins
     if (process.env.NODE_ENV !== "production") {
       const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
-      if (count > 1) {
+      const hasAllowedCombo = isDanger && isBare && count === 2;
+      if (count > 1 && !hasAllowedCombo) {
         console.warn(
           "[Button]: Multiple variant props passed. Using the highest priority only."
         );
@@ -67,7 +79,7 @@ export const Button = forwardRef(
     }
 
     const defaults =
-      "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
+      "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
 
     const fonts =
       "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
@@ -86,6 +98,8 @@ export const Button = forwardRef(
       secondary:
         "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      dangerBare:
+        "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
       danger:
         "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
       disabled:
@@ -104,7 +118,9 @@ export const Button = forwardRef(
         ref={ref}
         {...props}
       >
-        {children}
+        {startIcon}
+        {children ? <span>{children}</span> : null}
+        {endIcon}
       </button>
     );
   }

package/src/elements/Button.test.jsx

@@ -52,6 +52,18 @@ describe("Button", () => {
     expect(screen.getByRole("button").className).toMatch(/bg-bg-danger-base/);
   });
 
+  it("applies danger bare variant when isDanger and isBare", () => {
+    render(
+      <Button isDanger isBare>
+        Danger Bare
+      </Button>
+    );
+    const btn = screen.getByRole("button");
+    expect(btn.className).toMatch(/text-fg-danger-emphasis/);
+    expect(btn.className).toMatch(/bg-bg-base/);
+    expect(btn.className).not.toMatch(/bg-bg-danger-base/);
+  });
+
   it("applies disabled variant when disabled=true", () => {
     render(<Button disabled>Disabled</Button>);
     const btn = screen.getByRole("button");
@@ -76,4 +88,33 @@ describe("Button", () => {
 
     warnSpy.mockRestore();
   });
+
+  it("renders start and end icons when provided", () => {
+    render(
+      <Button
+        startIcon={<span data-testid="start-icon">S</span>}
+        endIcon={<span data-testid="end-icon">E</span>}
+      >
+        With icons
+      </Button>
+    );
+
+    expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+  });
+
+  it("does not warn for the danger bare combination", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(
+      <Button isDanger isBare>
+        Allowed
+      </Button>
+    );
+
+    expect(warnSpy).not.toHaveBeenCalled();
+
+    warnSpy.mockRestore();
+  });
 });