dcc.Clipboard
The dcc.Clipboard component copies text to the
user’s clipboard with a single click.
Examples
Find a few usage examples below.
Simple Clipboard Example
The easiest way to trigger the copy is by using the target_id property.
No callback is required! Place dcc.Clipboard in the layout where
you would like the copy icon located. Specify the target_id of the component
with text to copy. In this example, the content of the value property of the
dcc.Textarea is copied to the clipboard.
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Textarea(
id="textarea_id",
value="Copy and paste here",
style={"height": 100},
),
dcc.Clipboard(
target_id="textarea_id",
title="copy",
style={
"display": "inline-block",
"fontSize": 20,
"verticalAlign": "top",
},
),
])
if __name__ == "__main__":
app.run(debug=True)
Clipboard Icon inside a Scrollable Div
The style and className can be used to change the design or the position
of the copy icon. This example shows the icon placed in the top right corner
of a scrollable div.
from dash import Dash, dcc, html
app = Dash()
markdown = """
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Cras non lacus maximus,
tincidunt nibh in, finibus nisi. Cras
ut lacus sed lacus tempus rutrum. Integer
ut feugiat nisi, nec tempus velit.
Proin placerat erat odio, et laoreet
sapien mattis et. Curabitur laoreet imperdiet
congue. Integer congue a augue non vulputate.
Ut a leo auctor, sodales sem ac, cursus
ipsum. Fusce in est nec urna pretium
aliquet. Nunc nisl eros, blandit eu diam
convallis, elementum dictum tortor.
"""
app.layout = html.Div([
dcc.Markdown(
markdown,
id="copyable-markdown",
style={"width": 500, "height": 200, "overflow": "auto"},
),
dcc.Clipboard(
target_id="copyable-markdown",
style={
"position": "absolute",
"top": 0,
"right": 20,
"fontSize": 15,
},
),
], style={"width": 500, "height": 200, "position": "relative"})
if __name__ == "__main__":
app.run(debug=True)
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Cras non lacus maximus,
tincidunt nibh in, finibus nisi. Cras
ut lacus sed lacus tempus rutrum. Integer
ut feugiat nisi, nec tempus velit.
Proin placerat erat odio, et laoreet
sapien mattis et. Curabitur laoreet imperdiet
congue. Integer congue a augue non vulputate.
Ut a leo auctor, sodales sem ac, cursus
ipsum. Fusce in est nec urna pretium
aliquet. Nunc nisl eros, blandit eu diam
convallis, elementum dictum tortor.
Updating the Clipboard Text in a Callback
When target_id is not specified, the content of the content or html_content property
is copied to the clipboard. This works well with components like dash_ag_grid.AgGrid,
where you may want to customize the text in a callback. In this example,
the dataframe is converted to text with pandas to_csv(). See the
pandas documentation
for other formatting options such as including or excluding headers.
from dash import Dash, dcc, html, Input, Output, State, callback
import dash_ag_grid as dag
import pandas as pd
app = Dash()
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")
app.layout = html.Div(
[
dcc.Clipboard(id="table_copy", style={"fontSize":20}),
dag.AgGrid(
id="table_cb",
rowData=df.to_dict("records"),
columnDefs=[{"field": i} for i in df.columns],
)
]
)
@callback(
Output("table_copy", "content"),
Input("table_copy", "n_clicks"),
State("table_cb", "rowData"),
)
def custom_copy(_, data):
dff = pd.DataFrame(data)
# See options for .to_csv() or .to_excel() or .to_string() in the pandas documentation
return dff.to_csv(index=False) # includes headers
if __name__ == "__main__":
app.run(debug=True)
Customizing the Clipboard Button
New in Dash 3.4.0
Use the children and copied_children properties to replace the default copy icons.
These properties specify the content shown inside the dcc.Clipboard button before and after copying. Because the
button is rendered internally by dcc.Clipboard, children and copied_children should be non-interactive. Use
elements like html.Div, html.I or text and style them to look like a button.
from dash import Dash, html, dcc
app = Dash(__name__)
button_style = {
"padding": "6px 12px",
"border": "1px solid #ced4da",
"borderRadius": 4,
"cursor": "pointer",
"display": "inline-block",
"marginRight": 12,
}
app.layout = html.Div(
[
# 1. Style the default clipboard icon like a button
dcc.Clipboard(
content="Styled default icon",
style=button_style,
title="Copy",
),
# 2. Replace the default icons using children and copied_children
dcc.Clipboard(
children="📋",
copied_children="✅",
content="Icon swap example",
style=button_style,
title="Copy",
),
# 3. Use html.Div for text-based content with custom colors
dcc.Clipboard(
children=html.Div(
"Copy",
style={**button_style, "color": "white", "backgroundColor": "#0d6efd"},
),
copied_children=html.Div(
"Copied",
style={**button_style,"color": "white", "backgroundColor": "#198754"},
),
content="Custom text button",
style={ "display": "inline-block"}
),
# 4. Use with dash >=4.0. Styles clipboard like dcc.Button
dcc.Clipboard(
content="Styled default icon like dcc.Button",
className="dash-button",
style={ "display": "inline-block"},
title="Copy",
),
],
)
if __name__ == "__main__":
app.run(debug=True)
This example uses Bootstrap utility classes and Bootstrap Icons to style the dcc.Clipboard button and replace the
default copy icons.
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP])
app.layout = html.Div(
[
# Bootstrap-styled default clipboard icon
dcc.Clipboard(
content="Bootstrap styled icon",
className="btn btn-outline-primary d-inline me-2",
title="Copy",
),
# Replace the default icons with Bootstrap Icons
dcc.Clipboard(
children=html.I(className="bi bi-clipboard"),
copied_children=html.I(className="bi bi-check-circle"),
content="Bootstrap icon swap",
className="btn btn-secondary me-2 d-inline",
title="Copy",
),
# Text-based content styled like a Bootstrap button
dcc.Clipboard(
children=html.Div("Copy", className="btn btn-primary"),
copied_children=html.Div("Copied", className="btn btn-success"),
content="Bootstrap text button",
className="d-inline",
title="Copy",
),
],
)
if __name__ == "__main__":
app.run(debug=True)
Limitations
This component uses the Clipboard API. This feature is available only in secure contexts
(HTTPS), in some or all supporting browsers. When
the Clipboard API is unavailable, the icon will not appear in the app and a warning message is
written to the console.
Currently dcc.Clipboard only supports copying text to the
clipboard. It does not support paste or other clipboard operations.
Clipboard Properties
Access this documentation in your Python terminal with:
```pythonhelp(dash.dcc.Clipboard)
```
Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.
children (list of or a singular dash component, string or number; optional):
Children rendered inside the Clipboard button before copying. By
default, a copy icon.
id (string; optional):
The ID used to identify this component.
copied_children (list of or a singular dash component, string or number; optional):
Children rendered inside the Clipboard button after the value has been
copied. By default, a check icon.
target_id (string | dict; optional):
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 value prop will be copied.
content (string; optional):
The text to be copied to the clipboard if the target_id is None.
n_clicks (number; default 0):
The number of times Clipboard button was clicked.
html_content (string; optional):
The clipboard html text be copied to the clipboard if the target_id
is None.
title (string; optional):
The text shown as a tooltip when hovering over the copy icon.
style (dict; optional):
The icon’s styles.
className (string; optional):
The class name of the icon element.