From 6dbafd592b5b280f3249b070b717e5438cbadc1e Mon Sep 17 00:00:00 2001
From: AnnMarueW <amward@fastmail.com>
Date: Mon, 12 Jan 2026 08:09:33 -0800
Subject: [PATCH 1/3] update Clipboard

---
 .../src/components/Clipboard.react.js         | 46 ++++++++++++++++---
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/components/dash-core-components/src/components/Clipboard.react.js b/components/dash-core-components/src/components/Clipboard.react.js
index 72d94c8199..b0c2493073 100644
--- a/components/dash-core-components/src/components/Clipboard.react.js
+++ b/components/dash-core-components/src/components/Clipboard.react.js
@@ -128,20 +128,33 @@ export default class Clipboard extends React.Component {
     }
 
     render() {
-        const {id, title, className, style} = this.props;
-        const copyIcon = <FontAwesomeIcon icon={faCopy} />;
-        const copiedIcon = <FontAwesomeIcon icon={faCheckCircle} />;
-        const btnIcon = this.state.copied ? copiedIcon : copyIcon;
+        const {
+            id,
+            title,
+            className,
+            style,
+            copied_className,
+            copied_style,
+            children,
+            copied_children,
+        } = this.props;
+
+        const isCopied = this.state.copied;
+
+        const content = isCopied
+            ? copied_children ?? <FontAwesomeIcon icon={faCheckCircle} />
+            : children ?? <FontAwesomeIcon icon={faCopy} />;
 
         return clipboardAPI ? (
             <LoadingElement
+                elementType={'button'}
                 id={id}
                 title={title}
-                style={style}
-                className={className}
+                style={isCopied ? copied_style ?? style : style}
+                className={isCopied ? copied_className ?? className : className}
                 onClick={this.onClickHandler}
             >
-                <i> {btnIcon}</i>
+                {content}
             </LoadingElement>
         ) : null;
     }
@@ -160,6 +173,16 @@ Clipboard.propTypes = {
      */
     id: PropTypes.string,
 
+    /**
+     * The children of this component.  By default copy icon
+     */
+    children: PropTypes.node,
+
+    /**
+     * The children of this component displayed while copying.  By default checked icon
+     */
+    copied_children: PropTypes.node,
+
     /**
      * The id of target component containing text to copy to the clipboard.
      * The inner text of the `children` prop will be copied to the clipboard.  If none, then the text from the
@@ -196,6 +219,15 @@ Clipboard.propTypes = {
      * The class  name of the icon element
      */
     className: PropTypes.string,
+    /**
+     * The icon's styles while copying
+     */
+    copied_style: PropTypes.object,
+
+    /**
+     * The class  name of the icon element while copying
+     */
+    copied_className: PropTypes.string,
 
     /**
      * Dash-assigned callback that gets fired when the value changes.

From 4a3d6ab33a641c3f0d4fd2fe4ee1f5eef5363c63 Mon Sep 17 00:00:00 2001
From: AnnMarueW <amward@fastmail.com>
Date: Mon, 12 Jan 2026 08:40:25 -0800
Subject: [PATCH 2/3] Keep div as element type so it doesn't change the layout

---
 .../dash-core-components/src/components/Clipboard.react.js       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/dash-core-components/src/components/Clipboard.react.js b/components/dash-core-components/src/components/Clipboard.react.js
index b0c2493073..b801295d58 100644
--- a/components/dash-core-components/src/components/Clipboard.react.js
+++ b/components/dash-core-components/src/components/Clipboard.react.js
@@ -147,7 +147,6 @@ export default class Clipboard extends React.Component {
 
         return clipboardAPI ? (
             <LoadingElement
-                elementType={'button'}
                 id={id}
                 title={title}
                 style={isCopied ? copied_style ?? style : style}

From cffac431143fe47e4d987f298f335e3bbc4482b7 Mon Sep 17 00:00:00 2001
From: AnnMarueW <amward@fastmail.com>
Date: Wed, 14 Jan 2026 13:12:12 -0800
Subject: [PATCH 3/3] simplify API

---
 .../src/components/Clipboard.react.js         | 35 +++++--------------
 1 file changed, 9 insertions(+), 26 deletions(-)

diff --git a/components/dash-core-components/src/components/Clipboard.react.js b/components/dash-core-components/src/components/Clipboard.react.js
index b801295d58..7a2b774402 100644
--- a/components/dash-core-components/src/components/Clipboard.react.js
+++ b/components/dash-core-components/src/components/Clipboard.react.js
@@ -128,20 +128,12 @@ export default class Clipboard extends React.Component {
     }
 
     render() {
-        const {
-            id,
-            title,
-            className,
-            style,
-            copied_className,
-            copied_style,
-            children,
-            copied_children,
-        } = this.props;
+        const {id, title, className, style, children, copied_children} =
+            this.props;
 
         const isCopied = this.state.copied;
 
-        const content = isCopied
+        const button_children = isCopied
             ? copied_children ?? <FontAwesomeIcon icon={faCheckCircle} />
             : children ?? <FontAwesomeIcon icon={faCopy} />;
 
@@ -149,11 +141,11 @@ export default class Clipboard extends React.Component {
             <LoadingElement
                 id={id}
                 title={title}
-                style={isCopied ? copied_style ?? style : style}
-                className={isCopied ? copied_className ?? className : className}
+                style={style}
+                className={className}
                 onClick={this.onClickHandler}
             >
-                {content}
+                {button_children}
             </LoadingElement>
         ) : null;
     }
@@ -173,12 +165,12 @@ Clipboard.propTypes = {
     id: PropTypes.string,
 
     /**
-     * The children of this component.  By default copy icon
+     * Children rendered inside the Clipboard button before copying. By default, a copy icon.
      */
     children: PropTypes.node,
 
     /**
-     * The children of this component displayed while copying.  By default checked icon
+     * Children rendered inside the Clipboard button after the value has been copied. By default, a check icon.
      */
     copied_children: PropTypes.node,
 
@@ -195,7 +187,7 @@ Clipboard.propTypes = {
     content: PropTypes.string,
 
     /**
-     * The number of times copy button was clicked
+     * The number of times Clipboard button was clicked
      */
     n_clicks: PropTypes.number,
 
@@ -218,15 +210,6 @@ Clipboard.propTypes = {
      * The class  name of the icon element
      */
     className: PropTypes.string,
-    /**
-     * The icon's styles while copying
-     */
-    copied_style: PropTypes.object,
-
-    /**
-     * The class  name of the icon element while copying
-     */
-    copied_className: PropTypes.string,
 
     /**
      * Dash-assigned callback that gets fired when the value changes.