@edux-design/buttons 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -59,10 +59,12 @@ var IconButton = forwardRef(
 // src/elements/Button.jsx
 import React2, { forwardRef as forwardRef2 } from "react";
 import { cx as cx2 } from "@edux-design/utils";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Button = forwardRef2(
   ({
     children,
+    startIcon,
+    endIcon,
     size = "medium",
     isSecondary,
     isDanger,
@@ -73,19 +75,27 @@ var Button = forwardRef2(
     ...props
   }, 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";
+    }
     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."
         );
       }
     }
-    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";
+    const defaults = "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)";
     const sizes = {
       small: "h-[36px] py-8 px-16 rounded-lg text-sm",
@@ -97,11 +107,12 @@ var Button = forwardRef2(
       primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus  hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
       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: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline"
     };
     const STYLES = cx2(defaults, sizes[size], width, fonts, variants[variant]);
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         role: "button",
@@ -111,7 +122,11 @@ var Button = forwardRef2(
         className: STYLES,
         ref,
         ...props,
-        children
+        children: [
+          startIcon,
+          children ? /* @__PURE__ */ jsx2("span", { children }) : null,
+          endIcon
+        ]
       }
     );
   }
@@ -128,7 +143,7 @@ var MenuButtonContext = createContext();
 import { cx as cx3 } from "@edux-design/utils";
 
 // ../icons/dist/index.mjs
-import { jsxs, jsx as jsx3 } from "react/jsx-runtime";
+import { jsxs as jsxs2, jsx as jsx3 } from "react/jsx-runtime";
 var SvgChevron = (props) => /* @__PURE__ */ jsx3(
   "svg",
   {
@@ -152,7 +167,7 @@ var SvgChevron = (props) => /* @__PURE__ */ jsx3(
 var Chevron_default = SvgChevron;
 
 // src/elements/MenuButton.jsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function MenuButton({ children, size }) {
   const SPLIT_BUTTON_STYLES = cx3(
     "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
@@ -161,7 +176,7 @@ function MenuButton({ children, size }) {
       "h-[40px] py-2": size === "medium" || size === void 0
     }
   );
-  return /* @__PURE__ */ jsxs2(MenuButtonContext.Provider, { value: true, children: [
+  return /* @__PURE__ */ jsxs3(MenuButtonContext.Provider, { value: true, children: [
     /* @__PURE__ */ jsx4("div", { className: SPLIT_BUTTON_STYLES, children }),
     /* @__PURE__ */ jsx4(Chevron_default, {})
   ] });
@@ -178,7 +193,7 @@ import React5, {
   useState
 } from "react";
 import { cx as cx4, filterChildrenByDisplayName } from "@edux-design/utils";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIZE_STYLES = {
   small: {
     button: "text-xs px-12 py-6 rounded-md "
@@ -371,7 +386,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
       ref: setContainerRef,
       role: "radiogroup",
       className: rootClasses,
-      children: /* @__PURE__ */ jsxs3("div", { className: trackClasses, children: [
+      children: /* @__PURE__ */ jsxs4("div", { className: trackClasses, children: [
         /* @__PURE__ */ jsx5(
           "span",
           {
@@ -434,7 +449,7 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
           const hasStartAdornment = option.startAdornment !== void 0 && option.startAdornment !== null;
           const endAdornment = option.endAdornment ?? option.endIcon;
           const hasEndAdornment = endAdornment !== void 0 && endAdornment !== null;
-          return /* @__PURE__ */ jsxs3(
+          return /* @__PURE__ */ jsxs4(
             "button",
             {
               ref: registerButtonRef(option.value),
@@ -480,8 +495,281 @@ function ButtonGroupItem(_props) {
   return null;
 }
 ButtonGroupItem.displayName = "ButtonGroupItem";
+
+// src/elements/ButtonCounter.jsx
+import React7, {
+  forwardRef as forwardRef4,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { cx as cx5 } from "@edux-design/utils";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var ButtonCounter = forwardRef4(function ButtonCounter2({
+  value,
+  defaultValue = 1,
+  onChange,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  children,
+  size = "medium",
+  isSecondary,
+  isDanger,
+  isBare,
+  isStretched,
+  disabled,
+  isEditable = false,
+  inputProps,
+  decrementIcon,
+  incrementIcon,
+  startIcon,
+  endIcon,
+  decrementButtonProps,
+  incrementButtonProps,
+  className,
+  ...rest
+}, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState2(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  const clampedValue = useMemo2(() => {
+    const safe = Number.isFinite(currentValue) ? currentValue : defaultValue;
+    return Math.min(max, Math.max(min, safe));
+  }, [currentValue, defaultValue, max, min]);
+  const commitValue = useCallback2(
+    (next) => {
+      const clamped = Math.min(max, Math.max(min, next));
+      if (!isControlled) setInternalValue(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    },
+    [isControlled, max, min, onChange]
+  );
+  const decrementDisabled = !!disabled || !Number.isFinite(clampedValue) || clampedValue - step < min;
+  const incrementDisabled = !!disabled || !Number.isFinite(clampedValue) || clampedValue + step > max;
+  let variant = "primary";
+  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";
+  }
+  if (process.env.NODE_ENV !== "production") {
+    const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
+    const hasAllowedCombo = isDanger && isBare && count === 2;
+    if (count > 1 && !hasAllowedCombo) {
+      console.warn(
+        "[ButtonCounter]: Multiple variant props passed. Using the highest priority only."
+      );
+    }
+    if (step <= 0) {
+      console.warn("[ButtonCounter]: step should be > 0.");
+    }
+  }
+  const CONTROL_SIZES = {
+    small: {
+      button: "h-[36px] w-[36px] text-sm",
+      display: "h-[36px] min-w-[48px] px-12 text-sm"
+    },
+    medium: {
+      button: "h-[44px] w-[44px] text-base",
+      display: "h-[44px] min-w-[56px] px-12 text-base"
+    },
+    large: {
+      button: "h-[56px] w-[56px] text-lg",
+      display: "h-[56px] min-w-[72px] px-16 text-lg"
+    }
+  };
+  const defaultsButton = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
+  const defaultsDisplay = "flex items-center justify-center text-bold tracking-normal";
+  const width = isStretched ? "w-full" : "w-fit-content";
+  const variants = {
+    primary: {
+      button: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+      display: "border-y-2 border-x-2 border-border-primary-emphasis bg-bg-primary-base text-white"
+    },
+    secondary: {
+      button: "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",
+      display: "border-y-2 border-x-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis"
+    },
+    bare: {
+      button: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      display: "bg-bg-base text-fg-primary-emphasis"
+    },
+    dangerBare: {
+      button: "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
+      display: "bg-bg-base text-fg-danger-emphasis"
+    },
+    danger: {
+      button: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
+      display: "border-y-2 border-x-2 border-border-danger-emphasis bg-bg-danger-base text-white"
+    },
+    disabled: {
+      button: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline cursor-not-allowed",
+      display: "border-y-2 border-x-2 border-border-subtle bg-bg-inactive text-fg-inactive"
+    }
+  };
+  const sizeStyles = CONTROL_SIZES[size] ?? CONTROL_SIZES.medium;
+  const variantStyles = variants[variant] ?? variants.primary;
+  const leftButtonStyles = cx5(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-l-lg",
+    "relative z-10",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-r-0" : null
+  );
+  const rightButtonStyles = cx5(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-r-lg",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-l-0" : null
+  );
+  const displayStyles = cx5(
+    defaultsDisplay,
+    sizeStyles.display,
+    "relative z-0",
+    variantStyles.display,
+    isStretched ? "flex-1" : null
+  );
+  const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
+  const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
+  const [draftValue, setDraftValue] = useState2(String(clampedValue));
+  const [isEditing, setIsEditing] = useState2(false);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    if (isEditing) return;
+    setDraftValue(String(clampedValue));
+  }, [clampedValue, isEditing]);
+  const commitDraft = useCallback2(() => {
+    const trimmed = String(draftValue).trim();
+    if (trimmed === "") {
+      setDraftValue(String(clampedValue));
+      return;
+    }
+    const next = Number(trimmed);
+    if (!Number.isFinite(next)) {
+      setDraftValue(String(clampedValue));
+      return;
+    }
+    commitValue(next);
+  }, [clampedValue, commitValue, draftValue]);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref,
+      className: cx5("inline-flex items-stretch", width, className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            ...decrementButtonProps,
+            type: "button",
+            "aria-label": (decrementButtonProps == null ? void 0 : decrementButtonProps["aria-label"]) ?? "Decrease",
+            "aria-disabled": decrementDisabled,
+            disabled: decrementDisabled,
+            className: cx5(
+              leftButtonStyles,
+              decrementDisabled && variant !== "disabled" ? variants.disabled.button : null,
+              decrementButtonProps == null ? void 0 : decrementButtonProps.className
+            ),
+            onClick: (event) => {
+              var _a;
+              (_a = decrementButtonProps == null ? void 0 : decrementButtonProps.onClick) == null ? void 0 : _a.call(decrementButtonProps, event);
+              if (event.defaultPrevented) return;
+              commitValue(clampedValue - step);
+            },
+            children: effectiveDecrementIcon
+          }
+        ),
+        isEditable && children == null ? /* @__PURE__ */ jsx6(
+          "input",
+          {
+            ...inputProps,
+            ref: inputRef,
+            type: "number",
+            inputMode: "numeric",
+            disabled: !!disabled,
+            "aria-label": (inputProps == null ? void 0 : inputProps["aria-label"]) ?? "Value",
+            className: cx5(
+              displayStyles,
+              "w-[44px] text-center outline-none bg-transparent text-fg-base",
+              "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:m-0",
+              "focus:shadow-focus focus-visible:shadow-focus focus:z-15 focus-within:z-15",
+              inputProps == null ? void 0 : inputProps.className
+            ),
+            value: draftValue,
+            onChange: (event) => {
+              var _a;
+              (_a = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a.call(inputProps, event);
+              if (event.defaultPrevented) return;
+              setDraftValue(event.target.value);
+            },
+            onFocus: (event) => {
+              var _a;
+              (_a = inputProps == null ? void 0 : inputProps.onFocus) == null ? void 0 : _a.call(inputProps, event);
+              if (event.defaultPrevented) return;
+              setIsEditing(true);
+            },
+            onBlur: (event) => {
+              var _a;
+              (_a = inputProps == null ? void 0 : inputProps.onBlur) == null ? void 0 : _a.call(inputProps, event);
+              if (event.defaultPrevented) return;
+              setIsEditing(false);
+              commitDraft();
+            },
+            onKeyDown: (event) => {
+              var _a;
+              (_a = inputProps == null ? void 0 : inputProps.onKeyDown) == null ? void 0 : _a.call(inputProps, event);
+              if (event.defaultPrevented) return;
+              if (event.key === "Enter") {
+                event.currentTarget.blur();
+              }
+              if (event.key === "Escape") {
+                setDraftValue(String(clampedValue));
+                event.currentTarget.blur();
+              }
+            }
+          }
+        ) : /* @__PURE__ */ jsx6("div", { className: cx5(displayStyles, "select-none"), children: children ?? clampedValue }),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            ...incrementButtonProps,
+            type: "button",
+            "aria-label": (incrementButtonProps == null ? void 0 : incrementButtonProps["aria-label"]) ?? "Increase",
+            "aria-disabled": incrementDisabled,
+            disabled: incrementDisabled,
+            className: cx5(
+              rightButtonStyles,
+              incrementDisabled && variant !== "disabled" ? variants.disabled.button : null,
+              incrementButtonProps == null ? void 0 : incrementButtonProps.className
+            ),
+            onClick: (event) => {
+              var _a;
+              (_a = incrementButtonProps == null ? void 0 : incrementButtonProps.onClick) == null ? void 0 : _a.call(incrementButtonProps, event);
+              if (event.defaultPrevented) return;
+              commitValue(clampedValue + step);
+            },
+            children: effectiveIncrementIcon
+          }
+        )
+      ]
+    }
+  );
+});
 export {
   Button,
+  ButtonCounter,
   ButtonGroup,
   ButtonGroupItem,
   IconButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "sideEffects": [
     "**/*.css"

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/demo/ButtonCounter.stories.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { ButtonCounter } from "./../index";
+
+export default {
+  title: "Components/Button",
+  component: ButtonCounter,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    isSecondary: { control: "boolean" },
+    isDanger: { control: "boolean" },
+    isBare: { control: "boolean" },
+    isStretched: { control: "boolean" },
+    disabled: { control: "boolean" },
+    isEditable: { control: "boolean" },
+    inputProps: { control: false },
+    defaultValue: { control: "number" },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+    value: { control: false },
+    onChange: { control: false },
+    decrementIcon: { control: false },
+    incrementIcon: { control: false },
+    decrementButtonProps: { control: false },
+    incrementButtonProps: { control: false },
+    children: { control: false },
+  },
+};
+
+const Template = (args) => <ButtonCounter {...args} />;
+
+export const PrimaryCounter = Template.bind({});
+PrimaryCounter.args = {
+  defaultValue: 1,
+  size: "medium",
+};
+
+export const EditableCounter = Template.bind({});
+EditableCounter.args = {
+  defaultValue: 1,
+  isEditable: true,
+};
+
+export const SecondaryCounter = Template.bind({});
+SecondaryCounter.args = {
+  defaultValue: 1,
+  isSecondary: true,
+};
+
+export const DangerCounter = Template.bind({});
+DangerCounter.args = {
+  defaultValue: 1,
+  isDanger: true,
+};
+
+export const BareCounter = Template.bind({});
+BareCounter.args = {
+  defaultValue: 1,
+  isBare: true,
+};
+
+export const DangerBareCounter = Template.bind({});
+DangerBareCounter.args = {
+  defaultValue: 1,
+  isBare: true,
+  isDanger: true,
+};
+
+export const DisabledCounter = Template.bind({});
+DisabledCounter.args = {
+  defaultValue: 1,
+  disabled: true,
+};
+
+export const SmallCounter = Template.bind({});
+SmallCounter.args = {
+  defaultValue: 1,
+  size: "small",
+};
+
+export const LargeCounter = Template.bind({});
+LargeCounter.args = {
+  defaultValue: 1,
+  size: "large",
+};
+
+export const StretchedCounter = Template.bind({});
+StretchedCounter.args = {
+  defaultValue: 1,
+  isStretched: true,
+};
+
+export const WithBoundsCounter = Template.bind({});
+WithBoundsCounter.args = {
+  defaultValue: 2,
+  min: 0,
+  max: 3,
+};

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();
+  });
 });