Svelte Clipboard - Flowbite
Use the clipboard component to copy text, data or lines of code to the clipboard with a single click based on various styles and examples coded with Tailwind CSS and Flowbite
The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element.
Use cases for websites can be found in the examples below and they include copying code installation commands, API keys, URLs, addresses, contact details, sharing course URLs inside a modal and more.
Set up #
Import Clipboard in the script tag.
- Svelte
<script>
import { Clipboard } from "flowbite-svelte";
</script>Default copy to clipboard #
Use this example to copy the content of an input text field by clicking on a button and update the button text.
String variable value is the source of the text copied to the clipboard. Boolean variable success turns true for a while when text was copied.
- Svelte
<script>
import { Clipboard, Input } from "flowbite-svelte";
import { CheckOutline } from "flowbite-svelte-icons";
let value = $state("npm install flowbite");
let success = $state(false);
</script>
<Input bind:value class="w-64" />
<Clipboard bind:value bind:success class="w-24">
{#if success}<CheckOutline />{:else}Copy{/if}
</Clipboard>Input with copy button #
This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied.
Notice the different style of monitoring the success state by using the parameter in the children snippet.
- Svelte
<div>
<Input bind:value class="w-64">
{#snippet right()}
<Clipboard bind:value embedded>
{#snippet children(success)}
<Tooltip isOpen={success}>{success ? "Copied" : "Copy to clipboard"}</Tooltip>
{#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
{/snippet}
</Clipboard>
{/snippet}
</Input>
</div>Copy button with text #
Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied.
- Svelte
<div>
<Input bind:value class="w-64 text-sm">
{#snippet right()}
<Clipboard size="xs" color="alternative" bind:value class="-mr-1 w-20 focus:ring-0">
{#snippet children(success)}
{#if success}
<CheckOutline class="h-3 w-3" /> Copied
{:else}
<ClipboardCleanSolid class="h-3 w-3" /> Copy
{/if}
{/snippet}
</Clipboard>
{/snippet}
</Input>
</div>Input group with copy #
This example can be used to show a copy to clipboard button inside an input group which has a label positioned inside the input field.
- Svelte
<ButtonGroup>
<InputAddon>URL</InputAddon>
<Input bind:value readonly disabled class="w-64" />
<Clipboard color="primary" bind:value>
{#snippet children(success)}
<Tooltip class="whitespace-nowrap">{success ? "Copied" : "Copy to clipboard"}</Tooltip>
{#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
{/snippet}
</Clipboard>
</ButtonGroup>URL shortener input group #
Use this example to copy a shortened URL to the clipboard by clicking on a button with an icon positioned inside the input field and also show a tooltip with a message when the text has been copied.
- Svelte
<div class="space-y-2">
<Label for="url-shortener">Shorten URL:</Label>
<ButtonGroup>
<Button color="primary">Generate</Button>
<Input id="url-shortener" bind:value readonly disabled class="w-64" />
<Clipboard bind:value>
{#snippet children(success)}
<Tooltip class="whitespace-nowrap">{success ? "Copied" : "Copy link"}</Tooltip>
{#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
{/snippet}
</Clipboard>
</ButtonGroup>
<Helper>Make sure that your URL is valid</Helper>
</div>Copy source code block #
This example can be used to copy and paste code inside a <pre> and <code> block by clicking on a button with an icon position inside the block and also show a tooltip with a message when the text has been copied.
- Svelte
<script>
import { Clipboard, Input, Label, Helper, Button } from "flowbite-svelte";
import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";
let value = $state("");
let success = $state(false);
function onclick(ev) {
value = ev.target.ownerDocument.querySelector("#code-block").innerText;
}
</script>
<div class="w-full max-w-lg space-y-1">
<Label>Card example URL shortener:</Label>
<div class="relative h-64 rounded-lg bg-gray-50 p-4 dark:bg-gray-700">
<div class="max-h-full overflow-scroll">
<pre><code id="code-block" class="text-sm whitespace-pre text-gray-500 dark:text-gray-400">
<div class="space-y-2">
<Label for="url-shortener">Shorten URL:</Label>
<ButtonGroup>
<Button color="primary">Generate</Button>
<Input id="url-shortener" bind:value readonly disabled class="w-64" />
<Clipboard bind:value>
{#snippet children(success)}
<Tooltip class="whitespace-nowrap">{success ? "Copied" : "Copy link"}</Tooltip>
{#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
{/snippet}
</Clipboard>
</ButtonGroup>
<Helper>Make sure that your URL is valid</Helper>
</div>
</code></pre>
</div>
<Clipboard color={success ? "alternative" : "light"} bind:value bind:success size="sm" class="absolute end-2 top-2 h-8 px-2.5 font-medium focus:ring-0" {onclick}>
{#if success}
<CheckOutline class="h-3 w-3" /> Copied
{:else}
<ClipboardCleanSolid class="h-3 w-3" /> Copy code
{/if}
</Clipboard>
</div>
<Helper>Configure Tailwind CSS and Flowbite before copying the code</Helper>
</div>Card with API keys #
Use this example to show multiple input field elements that have the copy to clipboard button inside a card component for more complex applications where you need to copy API keys, account IDs and more.
- Svelte
<script>
import { Card, Clipboard, Input, Label, Tooltip, Button } from "flowbite-svelte";
import { CheckOutline, ClipboardCleanSolid } from "flowbite-svelte-icons";
let acc_id = $state("756593826");
let api_key = $state("f4h6sd3t-jsy63ind-hsgdt7rs-jdhf76st");
let role_arn = $state("123456789012:user/Flowbite");
let value = $state("");
</script>
{#snippet children(success)}
<Tooltip isOpen={success}>{success ? "Copied" : "Copy to clipboard"}</Tooltip>
{#if success}<CheckOutline />{:else}<ClipboardCleanSolid />{/if}
{/snippet}
<Card size="md" class="p-4 sm:p-6 md:p-8">
<form class="flex flex-col space-y-6" action="/">
<h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Create a role with read only in-line policies</h2>
<p class="mb-6 text-gray-500 dark:text-gray-400">
To give Flowbite read access, please create an IAM Role following <a href="#top" class="font-medium text-blue-700 underline hover:no-underline dark:text-blue-500">trust relationship</a>
and
<a href="#top" class="font-medium text-blue-700 underline hover:no-underline dark:text-blue-500">inline policy</a>
.
</p>
<Label class="space-y-2 font-medium">
<div>Flowbite account ID:</div>
<Input bind:value={acc_id} readonly disabled>
{#snippet right()}
<Clipboard bind:value={acc_id} embedded {children} />
{/snippet}
</Input>
</Label>
<Label class="space-y-2 font-medium">
<div>API key:</div>
<Input bind:value={api_key} readonly disabled>
{#snippet right()}
<Clipboard bind:value={api_key} embedded {children} />
{/snippet}
</Input>
</Label>
<Label class="space-y-2 font-medium">
<div>Role ARN:</div>
<Input bind:value={role_arn} readonly disabled>
{#snippet right()}
<Clipboard bind:value={role_arn} embedded {children} />
{/snippet}
</Input>
</Label>
<div class="flex gap-4">
<Button color="alternative">Cancel</Button>
<Button type="submit">Next step</Button>
</div>
</form>
</Card>