diff --git a/components/dash-core-components/src/components/Clipboard.react.js b/components/dash-core-components/src/components/Clipboard.react.js
index 72d94c8199..7a2b774402 100644
--- a/components/dash-core-components/src/components/Clipboard.react.js
+++ b/components/dash-core-components/src/components/Clipboard.react.js
@@ -128,10 +128,14 @@ export default class Clipboard extends React.Component {
}
render() {
- const {id, title, className, style} = this.props;
- const copyIcon = ;
- const copiedIcon = ;
- const btnIcon = this.state.copied ? copiedIcon : copyIcon;
+ const {id, title, className, style, children, copied_children} =
+ this.props;
+
+ const isCopied = this.state.copied;
+
+ const button_children = isCopied
+ ? copied_children ??
+ : children ?? ;
return clipboardAPI ? (
- {btnIcon}
+ {button_children}
) : null;
}
@@ -160,6 +164,16 @@ Clipboard.propTypes = {
*/
id: PropTypes.string,
+ /**
+ * Children rendered inside the Clipboard button before copying. By default, a copy icon.
+ */
+ children: PropTypes.node,
+
+ /**
+ * Children rendered inside the Clipboard button after the value has been copied. By default, a check 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
@@ -173,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,