mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
34 lines
1.3 KiB
Text
34 lines
1.3 KiB
Text
<script>
|
|
import { CopyButton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
`CopyButton` lets users copy text to their clipboard with a single click. Use it to provide quick access to code snippets, links, or other text content.
|
|
|
|
This component uses the native [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text. Override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
|
|
|
|
## Default
|
|
|
|
Create a copy button with the `text` prop to specify what to copy.
|
|
|
|
<CopyButton text="Carbon svelte" />
|
|
|
|
## Custom feedback text
|
|
|
|
Set `feedback` to customize the message shown after copying.
|
|
|
|
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
|
|
|
|
## Overriding copy functionality
|
|
|
|
Pass a custom function to the `copy` prop to override the default copy behavior.
|
|
|
|
This example uses the NPM package [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
|
|
|
|
<FileSource src="/framed/CopyButton/CopyButtonOverride" />
|
|
|
|
## Preventing copy functionality
|
|
|
|
Pass a no-op function to the `copy` prop to disable copying.
|
|
|
|
<CopyButton text="This text should not be copied" copy={() => {}} />
|