# CopyButton

`{% copybutton %}` is a **built-in** tag for a **copy-to-clipboard
button**. Set `value` to the text to copy; on click it writes that value to the clipboard
and briefly swaps its label to a confirmation that the copy succeeded.

Use it as `{% copybutton %}` in Markdown, or call it from Python
logic (loops, snippets) via `component('aardvark', 'copybutton', …)`.



<br>

Source: Markdown

```aardvark
{% copybutton value='npm install aardvark' label='Copy command' %}
```


Source: Python

```python
component('aardvark', 'copybutton', value='npm install aardvark', label='Copy command')
```






Mantine's `CopyButton` is a **render-prop** component — its child is a
`({ copied, copy }) => …` function, which a build-time Markdown tag can't author. This tag
provides the common case for you: a button (with a hover tooltip) that copies `value` and
confirms. For a fully custom trigger, write a [snippet](/authoring/custom-components/) — a
small React component where you have the render-prop in hand.




## Labels and timeout

`label` is the resting text; `copiedLabel` is shown after a copy; `timeout` (ms) controls
how long the confirmation stays before reverting.



<br>

Source: Markdown

```aardvark
{% copybutton value='hello@example.com' label='Copy email' copiedLabel='Copied!' timeout=2000 %}
```


Source: Python

```python
component('aardvark', 'copybutton', value='hello@example.com', label='Copy email',
          copiedLabel='Copied!', timeout=2000)
```



## Appearance

`variant`, `color`, `size`, and `radius` style the button (it turns teal on a successful
copy regardless).

  

<br>

Source: Markdown

```aardvark
{% copybutton value='one' variant='light' label='light' %}
{% copybutton value='two' variant='outline' color='grape' label='outline grape' %}
{% copybutton value='three' size='lg' radius='xl' label='lg + xl radius' %}
```


Source: Python

```python
component('aardvark', 'copybutton', value='one', variant='light', label='light')
component('aardvark', 'copybutton', value='two', variant='outline', color='grape', label='outline grape')
component('aardvark', 'copybutton', value='three', size='lg', radius='xl', label='lg + xl radius')
```



## With other components

Drop a copy button next to a value you want readers to grab — here paired with the value in
a [code](/components/typography/code/) span inside a `{% group %}`:




aardvark_live_a1b2c3





<br>

Source: Markdown

```aardvark
{% group gap='xs' %}
{% code %}aardvark_live_a1b2c3{% endCode %}
{% copybutton value='aardvark_live_a1b2c3' label='Copy key' copiedLabel='Copied' size='xs' %}
{% endGroup %}
```


Source: Python

```python
component('aardvark', 'copybutton', value='aardvark_live_a1b2c3',
          label='Copy key', copiedLabel='Copied', size='xs')
```



## Attributes

Omit any attribute to take its default.

| Attribute | Valid values | Description |
| --- | --- | --- |
| `value` | string | The text copied to the clipboard. |
| `label` | string | Resting button text. |
| `copiedLabel` | string | Text shown briefly after a copy. |
| `timeout` | integer (milliseconds) | How long the confirmation stays before reverting. |
| `variant` | `filled`, `light`, `outline`, `subtle`, `default`, `transparent`, `white` | Visual style. |
| `color` | theme color name or CSS color | Button color. |
| `size` | `xs`–`xl` | Button size. |
| `radius` | `xs`–`xl` or any CSS value | Corner radius. |

For a custom trigger element, write a [snippet](/authoring/custom-components/) — inside your
own React component you get Mantine's `CopyButton` render-prop in full.

## CSS Selectors

The button mounts inside an island wrapper carrying `data-aardvark-island="CopyButton"` and renders a Mantine `Button`, so Mantine's Button Styles API classes apply to the rendered element.


```css
[data-aardvark-island="CopyButton"]  /* the island wrapper */
.mantine-Button-root                 /* the rendered <button> */
.mantine-Button-label                /* the resting / confirmation text */
.mantine-Button-inner                /* the content row */
```


## Injecting Attributes

`attr={…}` forwards raw HTML attributes (including event handlers) onto the rendered button.



<br>

Source: Markdown

```aardvark
{% copybutton value='npm install aardvark' label='Copy command' attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''} %}
```


Source: Python

```python
component('aardvark', 'copybutton', value='npm install aardvark', label='Copy command', attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''})
```