| group | package | title | order | slug | category | description | props | import | source | docs | |
|---|---|---|---|---|---|---|---|---|---|---|---|
mantine-core |
@mantine/core |
CopyButton |
1 |
/core/copy-button/ |
buttons |
Copies given text to clipboard |
|
import { CopyButton } from '@mantine/core'; |
mantine-core/src/CopyButton/CopyButton.tsx |
core/CopyButton.mdx |
import { CopyButtonDemos } from '@mantine/demos';
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
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.
You can provide a custom copied reset timeout: