Skip to content

update Clipboard #3568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
T4rk1n merged 5 commits into from
Jan 20, 2026
Merged

update Clipboard #3568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6dbafd5
update Clipboard
AnnMarieW Jan 12, 2026
4a3d6ab
Keep div as element type so it doesn't change the layout
AnnMarieW Jan 12, 2026
cffac43
simplify API
AnnMarieW Jan 14, 2026
b4b8619
added changelog and test
AnnMarieW Jan 18, 2026
9164e36
Merge branch 'dev' into update-clipboard
T4rk1n Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
## [UNRELEASED]

## Added
- [#3568]((https://github.com/plotly/dash/pull/3568) Added `children` and `copied_children` props to `dcc.Clipboard` to customize the button contents before and after copying.
- [#3534]((https://github.com/plotly/dash/pull/3534) Adds `playsInline` prop to `html.Video`. Based on [#2338]((https://github.com/plotly/dash/pull/2338)
- [#3541](https://github.com/plotly/dash/pull/3541) Add `attributes` dictionary to be be formatted on script/link (_js_dist/_css_dist) tags of the index, allows for `type="module"` or `type="importmap"`. [#3538](https://github.com/plotly/dash/issues/3538)
- [#3564](https://github.com/plotly/dash/pull/3564) Add new parameter `hide_all_callbacks` to `run()`. Closes [#3493](https://github.com/plotly/dash/issues/3493)
Expand Down
26 changes: 20 additions & 6 deletions components/dash-core-components/src/components/Clipboard.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,14 @@ 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, children, copied_children} =
this.props;

const isCopied = this.state.copied;

const button_children = isCopied
? copied_children ?? <FontAwesomeIcon icon={faCheckCircle} />
: children ?? <FontAwesomeIcon icon={faCopy} />;

return clipboardAPI ? (
<LoadingElement
Expand All @@ -141,7 +145,7 @@ export default class Clipboard extends React.Component {
className={className}
onClick={this.onClickHandler}
>
<i> {btnIcon}</i>
{button_children}
</LoadingElement>
) : null;
}
Expand All @@ -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,
Comment on lines +167 to +170
Copy link
Copy Markdown
Contributor

@KoolADE85 KoolADE85 Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a big fan of replacing the hard-coded <i> and giving users control of the child elements!
More than just the icon, I think that the default element should include the wrapper button/div itself. For example, a user might prefer to use an anchor instead.

Copy link
Copy Markdown
Collaborator Author

@AnnMarieW AnnMarieW Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That seems like a good idea, however, the Clipboard is essentially a Button, (and the base element should be updated to be a Button rather than a Div). It’s invalid HTML to have a Button or other interactive element as children of a Button. The purpose of updating the children is to simply provide feedback on the copy state.


/**
* 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
Expand All @@ -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,

Expand Down
43 changes: 43 additions & 0 deletions components/dash-core-components/tests/integration/clipboard/test_clipboard.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,46 @@ def selected(icon_clicks, button_clicks):
== copy_text,
timeout=3,
)


def test_clp004_clipboard_children_and_copied_children(dash_dcc_headed):
content = "https://dash.plotly.com/"
children_text = "Copy URL"
copied_children_text = "Copied!"

app = Dash(__name__, prevent_initial_callbacks=True)
app.layout = html.Div(
[
dcc.Clipboard(
id="clipboard",
children=children_text,
copied_children=copied_children_text,
content=content,
),
dcc.Textarea(id="textarea"),
]
)

dash_dcc_headed.start_server(app)

clipboard = dash_dcc_headed.find_element("#clipboard")

assert clipboard.text == children_text

clipboard.click()
wait.until(
lambda: dash_dcc_headed.find_element("#clipboard").text == copied_children_text,
timeout=3,
)
textarea = dash_dcc_headed.find_element("#textarea")
textarea.click()

ActionChains(dash_dcc_headed.driver).key_down(Keys.CONTROL).send_keys("v").key_up(
Keys.CONTROL
).perform()

wait.until(
lambda: dash_dcc_headed.find_element("#textarea").get_attribute("value")
== content,
timeout=3,
)