## CopyButton  
Copies given text to clipboard.  A DMC alternative to dcc.Clipboard.  
Category: Buttons  

### Introduction

`CopyButton` is a ready-to-use clipboard button built with the Mantine `Button` component.
It supports props for dynamic text, icons and colors while copying plus all standard `Button` props.


### Colors

Use `color` and `copiedColor` props to change the button’s color before and after copying.
Note - if `copiedColor` is not provided, the color will remain unchanged during copying.

```python
import dash_mantine_components as dmc

component = dmc.CopyButton(
    value="https://www.dash-mantine-components.com/",
    children="Copy URL",
    color="blue",
    copiedColor="teal"
)
```
### Copy State Display 

Use `children` and `copiedChildren` to control the content of the underlying button before and after copying.

The `CopyButton` renders a Mantine `Button` internally, and `children` / `copiedChildren` are passed directly as the
button’s children. For this reason, they must not contain interactive elements (for example: buttons, links, inputs,
or other clickable controls), as nesting interactive components inside a button results in invalid HTML and accessibility issues.

Use text, icons, or non-interactive Dash components (such as `Text`, `Group`, `Stack`, or `Icon` components) to customize the button content.

If you would like to use something other than a button (like an `ActionIcon`), use the `CustomCopyButton` instead.


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group([
    dmc.CopyButton(
        value="https://www.dash-mantine-components.com/",
        children="Copy URL",
        copiedChildren="Copied!",
        color="blue",
        copiedColor="teal"
    ),
    dmc.CopyButton(
        value="This text is copied",
        children=DashIconify(icon="tabler:clipboard"),
        copiedChildren=DashIconify(icon="tabler:check"),
        color="blue",
        copiedColor="teal",
        variant="outline"
    ),
    dmc.CopyButton(
        value="This text is copied",
        children=DashIconify(icon="fa-regular:copy"),
        copiedChildren=DashIconify(icon="fa-regular:check-circle"),
        color="gray",
        copiedColor="dark",
        variant="transparent"
    )
])
```
### Copy from another component
Use `target_id` to copy text (or value prop) from another component instead of using a static value. No callback required!

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify


component = dmc.Group([
    dmc.Textarea(
        "Type here.  This text will be copied.",
        id="text-to-copy",
        autosize=True,
        minRows=3,
        w=300
    ),
    dmc.CopyButton(
        target_id="text-to-copy",
        children=DashIconify(icon="fa-regular:copy"),
        copiedChildren=DashIconify(icon="fa-regular:check-circle"),
        color="var(--mantine-color-dimmed)",
        copiedColor="gray",
        variant="outline",
        size="xs"
    )
], gap=0, align="flex-start" )
```
### Copy in a callback

Set `triggerCopy=True` to trigger the copy from a callback. This property automatically resets to `False` after copying.

Note that the  `value` and `triggerCopy` properties can be updated in the same callback.


In this example, the `CopyButton` is hidden, and `triggerCopy` is set to `True` when the `value` of the `Select` component changes.

```python
import dash_mantine_components as dmc
from dash import Input, Output, callback

component = dmc.Box([
    dmc.Select(
        id="copy-select",
        data=["Job A", "Job B", "Job C"],
        label="Select Job",
        description="Results are copied to the clipboard"
    ),
    dmc.Text(id="copy-select-output"),
    dmc.CopyButton(
        id="copy-trigger",
        style={"visibility": "hidden"},
        value=""
    )
])

@callback(
    Output("copy-select-output", "children"),
    Output("copy-trigger", "value"),
    Output("copy-trigger", "triggerCopy"),
    Input("copy-select", "value")
)
def update_clipboard(v):
    results = f"Results from {v}"
    return results, results, True
```
### Timeout

The `timeout` prop controls how long the "copied" state is displayed (in milliseconds). The default is 1000ms.


```python
import dash_mantine_components as dmc

component = dmc.CopyButton(
    value="copied text",
    children="Copy",
    copiedChildren="Copied",
    color="dark.3",
    copiedColor="gray.2",
    autoContrast=True,
    timeout="2000"
)
```
### Custom Copy Button

Create a custom copy button using a JavaScript function. This example uses an `ActionIcon` and `Tooltip` that respond to the copied state.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.



```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.CustomCopyButton(
    value="Custom Copy demo",
    children={"function": "copyActionIcon"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;
var DashIconify = window.dash_iconify.DashIconify;

dmcfuncs.copyActionIcon = function({ copied, copy }) {
  return React.createElement(
    dmc.Tooltip,
    {
      label: copied ? 'Copied' : 'Copy',
      withArrow: true,
      position: 'right'
    },
    React.createElement(
      dmc.ActionIcon,
      {
        color: copied ? 'teal' : 'gray',
        variant: 'subtle',
        onClick: copy
      },
      copied
        ? React.createElement(DashIconify, { icon: 'tabler:check', style: { width: 16, height: 16 } })
        : React.createElement(DashIconify, { icon: 'tabler:copy', style: { width: 16, height: 16 } })
    )
  );
};
```



### Security
Due to security reasons `CopyButton` components will not work in iframes and may not work with local files opened with `file://` protocol.  

It will work with local websites using `http://` protocol, but when deployed it must use `https//` (secure).

Learn more about [navigator.clipboard](https://web.dev/articles/async-clipboard).


### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### CopyButton Selectors

| Selector | Static selector          | Description                                        |
|----------|---------------------------|----------------------------------------------------|
| root     | .mantine-Button-root      | Root element                                       |
| loader   | .mantine-Button-loader    | Loader component, displayed only when `loading` prop is set |
| inner    | .mantine-Button-inner     | Contains all other elements, child of the root element |
| section  | .mantine-Button-section   | Left and right sections of the button             |
| label    | .mantine-Button-label     | Button children                                   |

#### CopyButton CSS Variables

| Selector | Variable                  | Description                                       |
|----------|---------------------------|---------------------------------------------------|
| root     | --button-bg               | Controls background                               |
|          | --button-bd               | Controls border                                   |
|          | --button-hover            | Controls background when hovered                 |
|          | --button-color            | Controls text color                               |
|          | --button-hover-color      | Controls text color when hovered                 |
|          | --button-radius           | Controls border-radius                            |
|          | --button-height           | Controls height of the button                     |
|          | --button-padding-x        | Controls horizontal padding of the button         |
|          | --button-fz               | Controls font-size of the button                  |
|          | --button-justify          | Controls `justify-content` of the inner element   |

#### CopyButton Data Attributes

| Selector       | Attribute             | Condition               | Value                           |
|----------------|------------------------|--------------------------|---------------------------------|
| root           | data-disabled          | `disabled` prop is set   | –                               |
| root           | data-block             | `fullWidth` prop is set  | –                               |


### Keyword Arguments
#### CopyButton

- children (a list of or a singular dash component, string or number; optional):
    Button content displayed before copying.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color, used when the value
    has not been copied yet.

- copiedChildren (a list of or a singular dash component, string or number; optional):
    Button content displayed after the value has been copied to
    clipboard.

- copiedColor (optional):
    Key of `theme.colors` or any valid CSS color, used after the value
    has been copied to clipboard.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Indicates disabled state.

- fullWidth (boolean; optional):
    Determines whether button should take 100% width of its parent
    container, `False` by default.

- gradient (dict; optional):
    Gradient configuration used when `variant="gradient"`, default
    value is `theme.defaultGradient`.

    `gradient` is a dict with keys:

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- n_clicks (number; default 0):
    An integer that represents the number of times that this element
    has been clicked on.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` by default.

- size (optional):
    Controls button `height`, `font-size` and horizontal `padding`,
    `'sm'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- target_id (string; 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.

- timeout (number; default 1000):
    Copied status timeout in ms, `1000` by default.

- triggerCopy (boolean; default False):
    Set to True to trigger copy in a callback - will auto-reset to
    False after copy.

- value (string; default ''):
    Value to be copied to clipboard.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.
#### CustomCopyButton

- children (boolean | number | string | dict | list; optional):
    Function that receives {copied, copy} and returns a component  See
    https://www.dash-mantine-components.com/functions-as-props.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- timeout (number; default 1000):
    Copied status timeout in ms, `1000` by default.

- value (string; required):
    Value to be copied to clipboard.