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,