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/2] 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/2] 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}