@trackunit/react-components 2.10.30-alpha-fa4af587a69.0 → 2.11.0

package/index.cjs.js

@@ -27,6 +27,8 @@ var dequal = require('dequal');
 var defaultTranslations = {
 	"breadcrumb.backButton": "back",
 	"breadcrumb.expandButton": "expand",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Show more"
 };
 
@@ -1753,7 +1755,6 @@ const cvaButtonSpinner = cssClassVarianceUtilities.cvaMerge([], {
 const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
     variants: {
         size: {
-            extraSmall: ["h-3"],
             small: ["h-4"],
             medium: ["h-4"],
             large: ["h-5"],
@@ -1823,6 +1824,14 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items
 const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
         size: {
+            /**
+             * Sized to match a single text line (20px) so the button fits inside
+             * fixed-height contexts like table rows without clipping its hover state.
+             *
+             * `min-h-5` is what makes this an icon-only step: it overrides the
+             * text-height floor `cvaButton` applies for every size on its own scale.
+             */
+            extraSmall: ["p-0.5", "w-5", "h-5", "min-h-5"],
             small: ["p-1.5", "w-7", "h-7"],
             medium: ["p-2", "w-8", "h-8"],
             large: ["p-2.5", "w-10", "h-10"],
@@ -2525,6 +2534,16 @@ function useMergeRefs(refs) {
     }, [refEffect]);
 }
 
+/**
+ * Maps an icon-only size onto the text-button scale that `Button` understands.
+ *
+ * `extraSmall` has no text-button equivalent — its 20px box comes entirely from
+ * `cvaIconButton`, which overrides padding, width and height. `small` is the step
+ * whose remaining classes (`gap-1`, `text-xs`) already match, so it is what the
+ * icon-only components hand to `Button`.
+ */
+const toButtonSize = (size) => (size === "extraSmall" ? "small" : size);
+
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
  *
@@ -2569,7 +2588,7 @@ function useMergeRefs(refs) {
  */
 const IconButton = ({ icon, size = "medium", square = true, loading = false, disabled = false, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }) => {
     const accessibleLabel = ariaLabel ?? title;
-    return (jsxRuntime.jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsxRuntime.jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? react.cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: size, square: square, title: undefined }) }));
+    return (jsxRuntime.jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsxRuntime.jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? react.cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined }) }));
 };
 IconButton.displayName = "IconButton";
 
@@ -4042,11 +4061,14 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
  * clickable/displayed element, so it can be placed next to plain (non-clickable) text.
  *
  * ### When to use
- * Use CopyButton when the copyable value is displayed as plain text (e.g. in a table cell or
- * row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ * - Icon-only (default): the copyable value is displayed as plain text (e.g. in a table cell or
+ *   row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ * - Labelled (`label` set): copying is the primary action of a panel or section — e.g. an invite
+ *   link — and deserves a full button that is itself the click target.
  *
  * ### When not to use
- * If the displayed text itself should be the click target, use `CopyableText` instead.
+ * Do not hand-roll copy affordances (custom icons, click-to-copy text) — this component is the
+ * one copy control; pick icon-only or labelled mode instead.
  *
  * ### Empty values
  * Like `CopyableText`, CopyButton renders nothing when `value` is empty, so consumers never
@@ -4066,21 +4088,48 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
  * @param {CopyButtonProps} props - The props for the CopyButton component
  * @returns {ReactElement} CopyButton component
  */
-const CopyButton = ({ value, copyLabel = "Copy", copiedLabel = "Copied!", size = "small", className, style, "data-testid": dataTestId, ref, }) => {
+const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, variant = "ghost-neutral", className, style, "data-testid": dataTestId, onCopy, ref, }) => {
+    const [t] = useTranslation();
     const [showCopied, setShowCopied] = react.useState(false);
     const [, copyToClipboard] = useCopyToClipboard();
+    const resetTimerRef = react.useRef(undefined);
+    react.useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+    // Localized defaults, so call sites don't each re-declare "Copy"/"Copied!"
+    // in their own translation files; the props stay as context-specific overrides.
+    const resolvedCopyLabel = copyLabel ?? t("copyButton.copy");
+    const resolvedCopiedLabel = copiedLabel ?? t("copyButton.copied");
     if (!value) {
         return null;
     }
     const handleCopy = (e) => {
         e.stopPropagation();
         void copyToClipboard(value)
-            .then(() => setShowCopied(true))
-            .catch(() => undefined);
+            // Rejections (both clipboard mechanisms failed) are intentionally
+            // swallowed; the icon simply doesn't flip. A throwing onCopy is a
+            // consumer bug and surfaces as an unhandled rejection instead.
+            .then(() => {
+            // Flip the icon to a checkmark for a moment, then revert. The timer
+            // owns the copied state so the confirmation survives the pointer
+            // leaving the button, and runs even if onCopy below throws.
+            setShowCopied(true);
+            clearTimeout(resetTimerRef.current);
+            resetTimerRef.current = setTimeout(() => setShowCopied(false), COPIED_FEEDBACK_DURATION_MS);
+            onCopy?.();
+        }, () => undefined);
     };
-    return (jsxRuntime.jsx(Tooltip, { delayed: !showCopied, label: showCopied ? copiedLabel : copyLabel, placement: "top", children: jsxRuntime.jsx(Button, { ariaLabel: copyLabel, className: cvaIconButton({ size, className }), "data-testid": dataTestId, onBlur: () => setShowCopied(false), onClick: handleCopy, onMouseLeave: () => setShowCopied(false), prefix: jsxRuntime.jsx(Icon, { ariaHidden: true, name: "Square2Stack", size: size === "large" ? "medium" : "small" }), ref: ref, size: size, square: true, style: style, variant: "ghost-neutral" }) }));
+    const icon = (jsxRuntime.jsx(Icon, { ariaHidden: true, name: showCopied ? "Check" : "Square2Stack", size: size === "large" ? "medium" : "small" }));
+    if (label) {
+        // Labelled mode: a regular (non-square) button whose prefix icon carries
+        // the copied confirmation. `extraSmall` is icon-only, so it collapses to small.
+        // The visible label stays the accessible name (WCAG 2.5.3 Label in Name);
+        // since the copied feedback is otherwise visual-only, it is announced
+        // through the polite live region rendered next to the button.
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { delayed: !showCopied, label: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, placement: "top", children: jsxRuntime.jsx(Button, { className: className, "data-testid": dataTestId, onClick: handleCopy, prefix: icon, ref: ref, size: toButtonSize(size), style: style, variant: variant, children: label }) }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", children: showCopied ? resolvedCopiedLabel : undefined })] }));
+    }
+    return (jsxRuntime.jsx(Tooltip, { delayed: !showCopied, label: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, placement: "top", children: jsxRuntime.jsx(Button, { ariaLabel: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, className: cvaIconButton({ size, className }), "data-testid": dataTestId, onClick: handleCopy, prefix: icon, ref: ref, size: toButtonSize(size), square: true, style: style, variant: variant }) }));
 };
 CopyButton.displayName = "CopyButton";
+const COPIED_FEEDBACK_DURATION_MS = 2000;
 
 const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
     variants: {

package/index.esm.js

@@ -26,6 +26,8 @@ import { dequal } from 'dequal';
 var defaultTranslations = {
 	"breadcrumb.backButton": "back",
 	"breadcrumb.expandButton": "expand",
+	"copyButton.copied": "Copied!",
+	"copyButton.copy": "Copy",
 	"moreMenu.buttonLabel": "Show more"
 };
 
@@ -1752,7 +1754,6 @@ const cvaButtonSpinner = cvaMerge([], {
 const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
     variants: {
         size: {
-            extraSmall: ["h-3"],
             small: ["h-4"],
             medium: ["h-4"],
             large: ["h-5"],
@@ -1822,6 +1823,14 @@ const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
 const cvaIconButton = cvaMerge([], {
     variants: {
         size: {
+            /**
+             * Sized to match a single text line (20px) so the button fits inside
+             * fixed-height contexts like table rows without clipping its hover state.
+             *
+             * `min-h-5` is what makes this an icon-only step: it overrides the
+             * text-height floor `cvaButton` applies for every size on its own scale.
+             */
+            extraSmall: ["p-0.5", "w-5", "h-5", "min-h-5"],
             small: ["p-1.5", "w-7", "h-7"],
             medium: ["p-2", "w-8", "h-8"],
             large: ["p-2.5", "w-10", "h-10"],
@@ -2524,6 +2533,16 @@ function useMergeRefs(refs) {
     }, [refEffect]);
 }
 
+/**
+ * Maps an icon-only size onto the text-button scale that `Button` understands.
+ *
+ * `extraSmall` has no text-button equivalent — its 20px box comes entirely from
+ * `cvaIconButton`, which overrides padding, width and height. `small` is the step
+ * whose remaining classes (`gap-1`, `text-xs`) already match, so it is what the
+ * icon-only components hand to `Button`.
+ */
+const toButtonSize = (size) => (size === "extraSmall" ? "small" : size);
+
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
  *
@@ -2568,7 +2587,7 @@ function useMergeRefs(refs) {
  */
 const IconButton = ({ icon, size = "medium", square = true, loading = false, disabled = false, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }) => {
     const accessibleLabel = ariaLabel ?? title;
-    return (jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: size, square: square, title: undefined }) }));
+    return (jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined }) }));
 };
 IconButton.displayName = "IconButton";
 
@@ -4041,11 +4060,14 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
  * clickable/displayed element, so it can be placed next to plain (non-clickable) text.
  *
  * ### When to use
- * Use CopyButton when the copyable value is displayed as plain text (e.g. in a table cell or
- * row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ * - Icon-only (default): the copyable value is displayed as plain text (e.g. in a table cell or
+ *   row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ * - Labelled (`label` set): copying is the primary action of a panel or section — e.g. an invite
+ *   link — and deserves a full button that is itself the click target.
  *
  * ### When not to use
- * If the displayed text itself should be the click target, use `CopyableText` instead.
+ * Do not hand-roll copy affordances (custom icons, click-to-copy text) — this component is the
+ * one copy control; pick icon-only or labelled mode instead.
  *
  * ### Empty values
  * Like `CopyableText`, CopyButton renders nothing when `value` is empty, so consumers never
@@ -4065,21 +4087,48 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
  * @param {CopyButtonProps} props - The props for the CopyButton component
  * @returns {ReactElement} CopyButton component
  */
-const CopyButton = ({ value, copyLabel = "Copy", copiedLabel = "Copied!", size = "small", className, style, "data-testid": dataTestId, ref, }) => {
+const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, variant = "ghost-neutral", className, style, "data-testid": dataTestId, onCopy, ref, }) => {
+    const [t] = useTranslation();
     const [showCopied, setShowCopied] = useState(false);
     const [, copyToClipboard] = useCopyToClipboard();
+    const resetTimerRef = useRef(undefined);
+    useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+    // Localized defaults, so call sites don't each re-declare "Copy"/"Copied!"
+    // in their own translation files; the props stay as context-specific overrides.
+    const resolvedCopyLabel = copyLabel ?? t("copyButton.copy");
+    const resolvedCopiedLabel = copiedLabel ?? t("copyButton.copied");
     if (!value) {
         return null;
     }
     const handleCopy = (e) => {
         e.stopPropagation();
         void copyToClipboard(value)
-            .then(() => setShowCopied(true))
-            .catch(() => undefined);
+            // Rejections (both clipboard mechanisms failed) are intentionally
+            // swallowed; the icon simply doesn't flip. A throwing onCopy is a
+            // consumer bug and surfaces as an unhandled rejection instead.
+            .then(() => {
+            // Flip the icon to a checkmark for a moment, then revert. The timer
+            // owns the copied state so the confirmation survives the pointer
+            // leaving the button, and runs even if onCopy below throws.
+            setShowCopied(true);
+            clearTimeout(resetTimerRef.current);
+            resetTimerRef.current = setTimeout(() => setShowCopied(false), COPIED_FEEDBACK_DURATION_MS);
+            onCopy?.();
+        }, () => undefined);
     };
-    return (jsx(Tooltip, { delayed: !showCopied, label: showCopied ? copiedLabel : copyLabel, placement: "top", children: jsx(Button, { ariaLabel: copyLabel, className: cvaIconButton({ size, className }), "data-testid": dataTestId, onBlur: () => setShowCopied(false), onClick: handleCopy, onMouseLeave: () => setShowCopied(false), prefix: jsx(Icon, { ariaHidden: true, name: "Square2Stack", size: size === "large" ? "medium" : "small" }), ref: ref, size: size, square: true, style: style, variant: "ghost-neutral" }) }));
+    const icon = (jsx(Icon, { ariaHidden: true, name: showCopied ? "Check" : "Square2Stack", size: size === "large" ? "medium" : "small" }));
+    if (label) {
+        // Labelled mode: a regular (non-square) button whose prefix icon carries
+        // the copied confirmation. `extraSmall` is icon-only, so it collapses to small.
+        // The visible label stays the accessible name (WCAG 2.5.3 Label in Name);
+        // since the copied feedback is otherwise visual-only, it is announced
+        // through the polite live region rendered next to the button.
+        return (jsxs(Fragment, { children: [jsx(Tooltip, { delayed: !showCopied, label: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, placement: "top", children: jsx(Button, { className: className, "data-testid": dataTestId, onClick: handleCopy, prefix: icon, ref: ref, size: toButtonSize(size), style: style, variant: variant, children: label }) }), jsx("span", { className: "sr-only", role: "status", children: showCopied ? resolvedCopiedLabel : undefined })] }));
+    }
+    return (jsx(Tooltip, { delayed: !showCopied, label: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, placement: "top", children: jsx(Button, { ariaLabel: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, className: cvaIconButton({ size, className }), "data-testid": dataTestId, onClick: handleCopy, prefix: icon, ref: ref, size: toButtonSize(size), square: true, style: style, variant: variant }) }));
 };
 CopyButton.displayName = "CopyButton";
+const COPIED_FEEDBACK_DURATION_MS = 2000;
 
 const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
     variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.10.30-alpha-fa4af587a69.0",
+  "version": "2.11.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,16 +14,16 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.15.14-alpha-fa4af587a69.0",
-    "@trackunit/css-class-variance-utilities": "1.14.24-alpha-fa4af587a69.0",
-    "@trackunit/shared-utils": "1.16.27-alpha-fa4af587a69.0",
-    "@trackunit/ui-icons": "1.14.23-alpha-fa4af587a69.0",
+    "@trackunit/ui-design-tokens": "1.15.13",
+    "@trackunit/css-class-variance-utilities": "1.14.23",
+    "@trackunit/shared-utils": "1.16.26",
+    "@trackunit/ui-icons": "1.14.22",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "^3.14.3",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.4.34-alpha-fa4af587a69.0"
+    "@trackunit/i18n-library-translation": "2.4.34"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/CopyButton/CopyButton.d.ts

@@ -1,8 +1,9 @@
 import { type ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-import { Size } from "../../common/Size";
 import type { Styleable } from "../../common/Styleable";
+import { ButtonVariant } from "../buttons/shared/ButtonProps";
+import { IconButtonSize } from "../buttons/shared/IconButtonSize";
 export interface CopyButtonProps extends CommonProps, Styleable, Refable<HTMLButtonElement> {
     /**
      * The value copied to the clipboard when the button is clicked.
@@ -10,22 +11,41 @@ export interface CopyButtonProps extends CommonProps, Styleable, Refable<HTMLBut
     value: string;
     /**
      * Accessible label for the button, and tooltip text shown before copying.
-     *
-     * @default "Copy"
+     * Defaults to the library's localized "Copy"; pass a value only when the
+     * context needs a more specific label (e.g. "Copy account ID").
      */
     copyLabel?: string;
     /**
-     * Tooltip text shown briefly after a successful copy.
-     *
-     * @default "Copied!"
+     * Tooltip text shown briefly after a successful copy. Defaults to the
+     * library's localized "Copied!".
      */
     copiedLabel?: string;
     /**
-     * The size of the icon button.
+     * The size of the icon button. Use `extraSmall` inside fixed-height contexts
+     * such as table rows, where the button must fit a single text line.
      *
      * @default "small"
      */
-    size?: Size;
+    size?: IconButtonSize;
+    /**
+     * Optional visible label. When set, the button renders as a regular
+     * labelled button instead of an icon-only control — use this where copying
+     * is the primary action of a panel (e.g. invite links). The icon still
+     * flips to a checkmark while the copied confirmation is active.
+     */
+    label?: string;
+    /**
+     * The button's variant.
+     *
+     * @default "ghost-neutral"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Called after the value has been written to the clipboard — via the
+     * Clipboard API or the `execCommand("copy")` fallback. Only skipped when
+     * both mechanisms fail.
+     */
+    onCopy?: () => void;
 }
 /**
  * CopyButton is a standalone icon button that copies a value to the clipboard when clicked,
@@ -33,11 +53,14 @@ export interface CopyButtonProps extends CommonProps, Styleable, Refable<HTMLBut
  * clickable/displayed element, so it can be placed next to plain (non-clickable) text.
  *
  * ### When to use
- * Use CopyButton when the copyable value is displayed as plain text (e.g. in a table cell or
- * row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ * - Icon-only (default): the copyable value is displayed as plain text (e.g. in a table cell or
+ *   row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ * - Labelled (`label` set): copying is the primary action of a panel or section — e.g. an invite
+ *   link — and deserves a full button that is itself the click target.
  *
  * ### When not to use
- * If the displayed text itself should be the click target, use `CopyableText` instead.
+ * Do not hand-roll copy affordances (custom icons, click-to-copy text) — this component is the
+ * one copy control; pick icon-only or labelled mode instead.
  *
  * ### Empty values
  * Like `CopyableText`, CopyButton renders nothing when `value` is empty, so consumers never
@@ -58,6 +81,6 @@ export interface CopyButtonProps extends CommonProps, Styleable, Refable<HTMLBut
  * @returns {ReactElement} CopyButton component
  */
 export declare const CopyButton: {
-    ({ value, copyLabel, copiedLabel, size, className, style, "data-testid": dataTestId, ref, }: CopyButtonProps): ReactElement | null;
+    ({ value, copyLabel, copiedLabel, size, label, variant, className, style, "data-testid": dataTestId, onCopy, ref, }: CopyButtonProps): ReactElement | null;
     displayName: string;
 };

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -1,9 +1,9 @@
 import type { MappedOmit } from "@trackunit/shared-utils";
 import { ComponentType, JSX, ReactElement } from "react";
 import { Refable } from "../../../common/Refable";
-import { Size } from "../../../common/Size";
 import { Icon, IconProps } from "../../Icon/Icon";
 import { ButtonCommonProps } from "../shared/ButtonProps";
+import { IconButtonSize } from "../shared/IconButtonSize";
 interface IconButtonBaseProps extends MappedOmit<ButtonCommonProps, "ariaLabel" | "size" | "title">, Refable<HTMLButtonElement>, Refable<HTMLButtonElement> {
     /**
      * The icon to display. Must be an `<Icon />` element.
@@ -16,9 +16,11 @@ interface IconButtonBaseProps extends MappedOmit<ButtonCommonProps, "ariaLabel"
      */
     renderAs?: keyof JSX.IntrinsicElements | ComponentType<any>;
     /**
-     * The size of the button. Defaults to "medium".
+     * The size of the button. Defaults to "medium". Use `extraSmall` inside
+     * fixed-height contexts such as table rows, where the button must fit a
+     * single text line.
      */
-    size?: Size;
+    size?: IconButtonSize;
 }
 type IconButtonAccessibleNameProps = {
     /**

package/src/components/buttons/shared/Button.variants.d.ts

@@ -11,10 +11,10 @@ export declare const cvaButtonSpinner: (props?: ({
     variant?: "filled" | "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaButtonPrefixSuffix: (props?: ({
-    size?: "small" | "medium" | "large" | "extraSmall" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
     variant?: "filled" | "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaIconButton: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
+    size?: "small" | "medium" | "large" | "extraSmall" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -39,7 +39,7 @@ export interface ButtonCommonProps extends CommonProps, Styleable, AriaProps {
      */
     variant?: ButtonVariant;
     /**
-     * The size of the button. "ExtraSmall" is only used for IconButtons.
+     * The size of the button.
      */
     size?: Size;
     /**

package/src/components/buttons/shared/IconButtonSize.d.ts

@@ -0,0 +1,16 @@
+import { Size } from "../../../common/Size";
+/**
+ * Size scale for icon-only buttons. Extends the regular button scale with
+ * `extraSmall` (20px), which matches a single text line so the button fits inside
+ * fixed-height contexts such as table rows without clipping.
+ */
+export type IconButtonSize = Size | "extraSmall";
+/**
+ * Maps an icon-only size onto the text-button scale that `Button` understands.
+ *
+ * `extraSmall` has no text-button equivalent — its 20px box comes entirely from
+ * `cvaIconButton`, which overrides padding, width and height. `small` is the step
+ * whose remaining classes (`gap-1`, `text-xs`) already match, so it is what the
+ * icon-only components hand to `Button`.
+ */
+export declare const toButtonSize: (size: IconButtonSize) => Size;

package/src/index.d.ts

@@ -13,6 +13,7 @@ export * from "./components/buttons/Button/Button";
 export * from "./components/buttons/IconButton/IconButton";
 export * from "./components/buttons/shared/Button.variants";
 export * from "./components/buttons/shared/ButtonProps";
+export type { IconButtonSize } from "./components/buttons/shared/IconButtonSize";
 export * from "./components/buttons/StarButton/StarButton";
 export * from "./components/Card/Card";
 export * from "./components/Card/CardBody";