[Feature Request] Allow customisation of dcc.Clipboard icon/children

[celia-lm]

Similar to dmc.CopyButton: https://www.dash-mantine-components.com/components/copybutton#

Current functionality:

Screen.Recording.2026-01-09.at.11.20.10.mov

• The copy icon is always shown.
• It can be hidden with css properties, but then a workaround with a callback needs to be implemented to trigger the copy functionality.
• There are python libraries that allow triggering copy-to-clipboard like pyperclip (https://pypi.org/project/pyperclip/) but (1) they still require a callback (2) they don't work on Dash Enterprise because "on Linux, this module makes use of the xclip or xsel commands, which should come with the os" and their installation as apt-packages doesn't work properly.

Desired functionality:

Screen.Recording.2026-01-09.at.11.11.22.mov

This functionality was achieved with the code included in the "Current workarounds" section.

Suggestion for how it would look code-wise: dcc.Clipboard as a wrapper for the component that triggers the copy functionality (similar to html.A). No id or callbacks needed.

app.layout = html.Div([
    html.H3("Click the button to copy the text to the clipboard"),
    ### Relevant code ###
    html.Div([
            dcc.Clipboard(
                children=html.Button(children=symbol), 
                style={"margin-right":"10px", "font-size":20}
                ),
         ], style={"margin":"10px", "display":"inline-flex"}) for symbol in symbols
    ### End of relevant code ###
    ], style={"display":"inline-flex"}),
    html.H3("Try to paste the copied symbol here"),
    dcc.Textarea(id="textarea", style={'width': '100%', 'height': 300})
], style={"margin":"30px"})

Current workarounds

This code is for the app that is run in the "Desired functionality" video.
It uses a hidden dcc.Clipboard and a callback that triggers its n_clicks property when a corresponding html.Button is clicked:

import dash
from dash import dcc, html, callback, Input, Output, State, MATCH

app = dash.Dash(__name__)

symbols = ["√", "π", "∑", "∆", "γ"]

app.layout = html.Div([
    html.H3("Click the button to copy the text to the clipboard"),
    html.Div([
        html.Div([
            html.Button(children=symbol, id={"type":"symbol", "index":str(i)}),
            dcc.Clipboard(
                target_id={"type":"symbol", "index":str(i)},
                id={"type":"copy-symbol", "index":str(i)},
                style={"display":"none"})
         ], style={"margin":"10px"}) for i, symbol in enumerate(symbols)
    ], style={"display":"inline-flex"}),
    html.H3("Try to paste the copied symbol here"),
    dcc.Textarea(id="textarea", style={'width': '100%', 'height': 300})
], style={"margin":"30px"})

@callback(
    Output({"type":"copy-symbol", "index":MATCH}, "n_clicks"),
    Input({"type":"symbol", "index":MATCH}, "n_clicks"),
    prevent_initial_call=True
)
def copy_symbol(n_clicks):
    return n_clicks
    
if __name__ == "__main__":
    app.run(debug=True)

Sample code for current functionality

import dash
from dash import dcc, html, callback, Input, Output, State, MATCH

app = dash.Dash(__name__)

symbols = ["√", "π", "∑", "∆", "γ"]

app.layout = html.Div([
    html.H3("Click the button to copy the text to the clipboard"),
    html.Div([
        html.Div([
            html.Div(
                children=symbol, 
                id={"type":"symbol", "index":str(i)}, 
                style={"margin-right":"10px", "font-size":20}
                ),
            dcc.Clipboard(
                target_id={"type":"symbol", "index":str(i)},
                id={"type":"copy-symbol", "index":str(i)},
                )
         ], style={"margin":"10px", "display":"inline-flex"}) for i, symbol in enumerate(symbols)
    ], style={"display":"inline-flex"}),
    html.H3("Try to paste the copied symbol here"),
    dcc.Textarea(id="textarea", style={'width': '100%', 'height': 300})
], style={"margin":"30px"})
    
if __name__ == "__main__":
    app.run(debug=True)

[AnnMarieW]

Hi @celia-lm

This is a good idea! The new dmc.CopyButton has some great features, and it would be nice to similar functionality to dcc.Clipboard

We could add a few props to the dcc.Clipboard so that it's possible to change the content and the style while copying. The default can be the current icons, so this would not be a breaking change.

Also, for better accessibility, the base component should be an html Button element, rather than a Div.

As a test, I added these props - Let me know what you think!

/**
 * The children of this component.  By default, a copy icon
 */
children: PropTypes.node,

/**
 * The children of this component displayed while copying.  By default, a  checked icon
 */
copied_children: PropTypes.node,

/**
 * The icon's styles while copying
 */
copied_style: PropTypes.object,

/**
 * The class  name of the icon element while copying
 */
copied_className: PropTypes.string,

Here are some examples:

dccClipboard1.webm

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dcc.Clipboard(
        children="∑",
        className="btn btn-primary",
        copied_className="btn btn-info",
        content="∑"
    ),
    html.H5("Try to paste the copied symbol here"),
    dcc.Textarea(id="textarea")
], style={"padding": 24})

if __name__ == "__main__":
    app.run(debug=True)

dccClipboard2.webm

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dcc.Clipboard(
        children="Copy URL",
        copied_children="Copied!",
        className="btn btn-primary",
        copied_className="btn btn-secondary",
        content="https://dash.plotly.com/"
    ),
    html.H5("Try to paste the copied content here"),
    dcc.Textarea(id="textarea")
], style={"padding": 24})

if __name__ == "__main__":
    app.run(debug=True)