CopyId

A long id, shortened, with a copy button.

r_8f2c…7a4b11 7c9e6679-7425-40de-944b-e07fc1f90ae7

copy-id.example.svelte

<script lang="ts">
  import { CopyId } from '@onlywin/ui-svelte';
</script>

<div class="example-stack">
  <CopyId label="round id" value="r_8f2c91d04e7a4b11" />
  <CopyId
    label="transaction id"
    value="7c9e6679-7425-40de-944b-e07fc1f90ae7"
    truncate={0}
  />
</div>

Usage

Do

Use it for round ids, transaction ids and keys people paste elsewhere.

Don’t

Do not truncate ids people must read out; set truncate to 0.

Accessibility

The copy button is named after what it copies; the result is announced.

Keyboard

CopyId keyboard interactions
Keys	Action
`Enter, Space`	Activate
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

CopyId props
Prop	Type	Default	Description
`label`	`string`	—	What the id is, for the copy button's name (`Copy round id`); default the value.
`onCopy`	`(value: string) => void`	—
`truncate`	`number`	`6`	Characters kept at each end; `0` shows the whole value.
`value` *required	`string`	—