Utility · Clipboard

Clipboard

Copy text to the clipboard with an auto-resetting copied state. Soma drives navigator.clipboard.writeText + the timeout reset; eidos forwards the Trigger to <Button> via the consumer pattern and animates the Indicator chip with the cascaded color accent.

parts{compiled.parts.order.length} events{events.length} sizes5 timeout {timeout}ms color {color} last event {lastEvent ?? '—'}

Inline value · Trigger sits next to the content to copy

{iconOnly ? '📋' : 'Copy'}

Block content · Trigger above a multi-line snippet

{iconOnly ? '📋' : 'Copy snippet'}

Last copied · what the consumer's onCopy recorded

{lastCopied ?? '— nothing copied yet —'}

log {#if log.length === 0} type a value above, click Copy — the Indicator chip pops for {timeout}ms; onCopy / onError entries land here. {:else} {#each log.slice(0, 3) as entry} {entry.kind} · {entry.msg} {fmtTime(entry.at)} {/each} {/if}

{#if tab === 'live'}

Controls

The Trigger renders via the Button consumer pattern — every Button visual prop (variant, iconOnly, rounded, size, color, intent) is forwarded. The Indicator is conditionally mounted while copied=true.

soma behaviour

timeout {#each [500, 2000, 5000] as n (n)} {/each}

eidos Clipboard cascade

size {#each ['xs', 'sm', 'md', 'lg', 'xl'] as s (s)} {/each} color (Indicator chip) {#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as c (c)} {/each}

eidos Trigger Button

variant {#each ['surface', 'outline', 'ghost'] as v (v)} {/each} iconOnly {iconOnly ? '📋 only' : 'with label'}

eidos visual · Clipboard + Trigger (Button consumer) + Indicator svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API reference

3 parts: Provider · Trigger · Indicator. Trigger reuses the eidos <Button> via the consumer pattern; pass variant, iconOnly, icon, etc just like any Button.

Provider (Clipboard)

Prop	Type	Default	Description
value	string	required	String to copy on Trigger click.
timeout	number	2000	ms before `copied` resets to false.
onCopy	(value) => void	—	Fires on successful copy.
onError	(err) => void	—	Fires when the clipboard API throws (permission denied, document not focused, etc).
size eidos	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Cascaded to the Trigger Button.
color eidos	ColorRole	'affirm'	Accent for the Indicator chip background + foreground.

Trigger (Button consumer)

Prop	Type	Default	Description
aria-label	string	'Copy to clipboard'	Translated default.
variant · rounded · iconOnly · icon · intent · color	Button props	ghost · md · false	Forwarded to `<Button>` via the `child` snippet.

Indicator

Prop	Type	Default	Description
forceMount	boolean	false	Keep in DOM while not copied — useful for CSS exit transitions.

Snippet props (Provider children)

Key	Type	Description
value	string	Current value that gets copied.
copied	boolean	`true` for `timeout` ms after a successful copy.
copy	() => Promise<void>	Imperative copy — bypass the Trigger button (e.g. trigger from a keyboard shortcut).

{/if} {#if tab === 'morfo'}

morfo · declarative contract

Source: src/uix/morfo/components/clipboard.ts.

Parts

{#each partsList as part (part.kebab)} {/each}

Part	Marker	Element	Role	Archetype	States	Optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.role ?? '—'}	{part.archetype ?? '—'}	{part.states.length ? part.states.join(' \| ') : '—'}	{part.optional ? 'yes' : 'no'}

Events declaration

{#each events as action (action.name)} {@const sem = action.semantic} {@const intentDecl = 'intent' in sem ? sem.intent : undefined} {@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'} {/each}

name	family	verb	sequence	intent	target
{action.name}	{sem.family}	{sem.verb ?? '—'}	{sem.sequence ?? 'pre'}	{intentStr}	{action.target}

{/if} {#if tab === 'sema'}

sema · events

Clipboard raises commit-copy (intent affirm) on success, commit-copy-error (intent threat) on failure, and shift-reset when the auto-reset timer fires.

{#each events as action (action.name)} {@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined} {@const effectiveIntent = typeof intentDecl === 'string' ? intentDecl : undefined} {/each}

Name	Family	Verb	Sequence	Intent	Play
{action.name}	{action.semantic.family}	{action.semantic.verb ?? '—'}	{action.semantic.sequence ?? 'pre'}	{effectiveIntent ?? '—'}

{/if} {#if tab === 'recipe'}

Eidos recipe

Selectors at src/uix/eidos/components/clipboard/clipboard.css.

Selector	Source	What it paints
[data-clipboard]	eidos	`display: contents` host — color cascade only.
[data-clipboard-trigger]	morfo	Marker on the underlying Button (Button consumer pattern).
[data-clipboard-indicator]	eidos	Pill chip with accent fill + pop-in animation.
@keyframes clipboard-pop	eidos	Indicator mount animation. Disabled under `prefers-reduced-motion`.

{/if} {#if tab === 'a11y'}

Accessibility

The Trigger is a native <button> with a translated aria-label ("Copy to clipboard" by default). The Indicator is decorative — the announcement that "the copy succeeded" should be delivered via Announce if the consumer wants screen-reader feedback.

Suggested compose with Announce

{`
  {#snippet children({ announce })}
     announce("Copied to clipboard")}
    >
      Copy
      
    
  {/snippet}
`}

Limitations

navigator.clipboard.writeText requires a focused document — fails with "Document is not focused" in unfocused iframes / dev previews. Works normally with real user clicks.
For SSR / tests, override the default writer via createActiveUix({'{'} clipboard {'}'}) or defineUixServices({'{'} clipboard {'}'}).
No execCommand('copy') fallback — the modern Clipboard API is the only path.

{/if}