CopyButton | tcpsystems/ui

Try it

Svelte

<CopyButton value="tcp deploy --env production" />

Examples

Basic

Basic.svelte

<script lang="ts">
	import CopyButton from '@tcpsystems/ui/foundation/CopyButton';
</script>

<CopyButton value="tcp deploy --env production" />

Labels

Labels.svelte

<script lang="ts">
	import CopyButton from '@tcpsystems/ui/foundation/CopyButton';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<CopyButton value="https://ai.tcp.systems/v1" label="Copy endpoint" copiedLabel="Endpoint copied" />
	<CopyButton value="pnpm add @tcpsystems/ui" label="Copy command" copiedLabel="Command copied" />
</Cluster>

Disabled

Disabled.svelte

<script lang="ts">
	import CopyButton from '@tcpsystems/ui/foundation/CopyButton';
</script>

<CopyButton value="sk-pending" label="Copy key" disabled />

Tracked

Tracked.svelte

<script lang="ts">
	import CopyButton from '@tcpsystems/ui/foundation/CopyButton';
</script>

<CopyButton value="git clone git@github.com:tcpsystems/ui.git" label="Copy clone URL" track="repo-header" />

API

Import

import CopyButton from '@tcpsystems/ui/foundation/CopyButton';

Prop	Type	Default
`value`	`string`	none
`label?`	`string`	`'Copy'`
`copiedLabel?`	`string`	`'Copied'`
`errorLabel?`	`string`	`'Copy failed. Select and copy the text.'`
`disabled?`	`native`	`false`
`track?`	`string`	none

Hook	Kind
`.tcp-copy`	Root class
`data-copied-label`	Data attribute
`data-copy-json`	Data attribute
`data-error-label`	Data attribute
`data-tcp-track`	Data attribute