CopyableID | tcpsystems/ui

Try it

run_01HZX4K9Q2M7V8N3B5T6Y0PDCE

Svelte

<CopyableID value="run_01HZX4K9Q2M7V8N3B5T6Y0PDCE" maxLength={24} />

Examples

Basic

run_01HZX4K9Q2M7V8N3B5T6Y0PDCE

Basic.svelte

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

<CopyableID value="run_01HZX4K9Q2M7V8N3B5T6Y0PDCE" />

Short

proj_4821

Short.svelte

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

<CopyableID value="proj_4821" />

Max length

3f9c2b1e-7a44-4d0e-9b6a-1c5d8e2f7a90

Max length.svelte

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

<CopyableID value="3f9c2b1e-7a44-4d0e-9b6a-1c5d8e2f7a90" maxLength={16} copyLabel="Copy deployment ID" />

Disabled

key_redacted_0000000000000000

Disabled.svelte

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

<CopyableID value="key_redacted_0000000000000000" disabled />

API

Import

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

Prop	Type	Default
`value`	`string`	none
`maxLength?`	`number`	`32`
`copyLabel?`	`string`	`'Copy ID'`
`copiedLabel?`	`string`	`'Copied'`
`errorLabel?`	`string`	none
`disabled?`	`boolean`	`false`
`track?`	`string`	none

Hook	Kind
`.tcp-copyable-id`	Root class