CopyButton

Copies given text to clipboard
Import

Usage

CopyButton is based on use-clipboard hook. Its children is a function that receives an object with the following properties:

  • copied – boolean value that indicates that given value was recently copied to clipboard, it resets after given timeout (defaults to 500ms)
  • copy – function that should be called to copy given value to clipboard
import { CopyButton, Button } from '@mantine/core';
function Demo() {
return (
<CopyButton value="https://mantine.dev">
{({ copied, copy }) => (
<Button color={copied ? 'teal' : 'blue'} onClick={copy}>
{copied ? 'Copied url' : 'Copy url'}
</Button>
)}
</CopyButton>
);
}

No iframes

Due to security reasons CopyButton component will not work in iframes and may not work with local files opened with file:// protocol (component will work fine with local websites that are using http:// protocol). You can learn more about navigator.clipboard here.

Timeout

You can provide a custom copied reset timeout:

import { CopyButton, ActionIcon, Tooltip } from '@mantine/core';
import { IconCopy, IconCheck } from '@tabler/icons';
function Demo() {
return (
<CopyButton value="https://mantine.dev" timeout={2000}>
{({ copied, copy }) => (
<Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
<ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>
{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
);
}
Download more icon variants from https://tabler-icons.io/i/search

CopyButton component props

NameTypeDescription
children *
(payload: { copied: boolean; copy(): void; }) => ReactNode
Function called with current status
timeout
number
Copied status timeout in ms
value *
string
Value that should be copied to the clipboard