CopyButton

Copies given text to clipboard
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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>
  );
}
Go back
CloseButton – @mantine/core
Up next
FileButton – @mantine/core

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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter