Mantine UIFAQColors generator

CopyButton

Copies given text to clipboard

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

PackageIcon

@mantine/core

Usage

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

  • copied – boolean value that indicates that a given value was recently copied to the clipboard, it resets after a given timeout (defaults to 500ms)
  • copy – function that should be called to copy the given value to the 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>
  );
}

Security

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

Timeout

You can provide a custom copied reset timeout:

import { ActionIcon, CopyButton, Tooltip } from '@mantine/core';
import { CopyIcon, CheckIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <CopyButton value="https://mantine.dev" timeout={2000}>
      {({ copied, copy }) => (
        <Tooltip label={copied ? 'Copied' : 'CopyIcon'} withArrow position="right">
          <ActionIcon color={copied ? 'teal' : 'gray'} variant="subtle" onClick={copy}>
            {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
          </ActionIcon>
        </Tooltip>
      )}
    </CopyButton>
  );
}

Incompatible with server components

CopyButton is not compatible with React server components because it requires using function as children. To use CopyButton, add "use client;" at the top of the file.

CloseButton

FileButton