CopyButton

The built-in copybutton tag — a button that copies a value to the clipboard and swaps its label to a confirmation. Customize the labels, timeout, and Button look.

{% 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', …).

Source: Markdown

Source: Python

Render-prop component, simplified

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 — 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.

Source: Markdown

Source: Python

Appearance

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

Source: Markdown

Source: Python

With other components

Drop a copy button next to a value you want readers to grab — here paired with the value in a code span inside a {% group %}:

aardvark_live_a1b2c3

Source: Markdown

Source: Python

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 — 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.

[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.

Source: Markdown

Source: Python