Actions

AppCopyButton

Copy to clipboard with visual "Copied" feedback.

<app-copy-button text="api-key"></app-copy-button>

A button that copies text to the clipboard on click, then shows "Copied" feedback by swapping its icon and label for 2 seconds. It uses navigator.clipboard.writeText() with a fallback to textarea + execCommand for browsers that lack the Clipboard API, and never throws on permission denial (silent fallback).

Supports both button form (label + icon) and icon-only form (like <app-action-icon>). Its look comes entirely from the shared @webority/theme, so the Razor <app-copy-button> and the React <AppCopyButton> render identically on every Webority surface.

Playground

Every attribute, live — click the button to see the real copy + "Copied" swap. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the button above it.

<app-copy-button text="api-key-123" />
size affects the icon-only glyph tooThe icon-only form uses the same 14 / 16 / 20px mapping as the button form's icon. Toggle iconOnly above and vary size to see the glyph scale.

Button form

A button with a label and an icon. The icon is clipboard initially, check after copy. Label swaps to copied-label for 2 seconds.

Default
Show code 
<app-copy-button text="api-key-123" />
Custom labels
Show code 
<app-copy-button text="https://invite.example.com/abc123" label="Copy link" copied-label="Link copied!" />

Variants

Match the button to its context — ghost (default), outline, secondary, or light.

ghost · outline · secondary · light
Show code 
<app-copy-button text="x" variant="ghost" label="Ghost" />
<app-copy-button text="x" variant="outline" label="Outline" />
<app-copy-button text="x" variant="secondary" label="Secondary" />
<app-copy-button text="x" variant="light" label="Light" />

Sizes

Three sizes: sm (compact), md (default), lg (prominent).

sm · md · lg
Show code 
<app-copy-button text="x" size="sm" label="Small" />
<app-copy-button text="x" size="md" label="Medium" />
<app-copy-button text="x" size="lg" label="Large" />

AppIcon-only form

Render as an icon-only button (like <app-action-icon>) when space is tight. The label becomes aria-label and title.

Icon-only
Show code 
<app-copy-button text="user-id-456" label="Copy ID" copied-label="ID copied" icon-only="true" />

When to use

Use it when

  • A user needs to copy an API key, token, ID, link, or other reference to the clipboard.
  • You want to show visual feedback — the icon and label swap for 2 seconds to confirm the copy.
  • The copied text is sensitive (token, key) and you want a compact, accessible button.

Reach for something else when

  • You are copying large amounts of data or structured content. → A download link or a manual selection + native copy.
  • The text to copy changes dynamically and you cannot react to it. → A static link or a form with a dedicated copy action.

Every option

The whole surface of the component, one cell per value — every cell is the real tag helper, so click any of them to see the copy + "Copied" swap.

variant — all four

variant="ghost"
variant="outline"
variant="secondary"
variant="light"

size — button form

size="sm"
size="md"
size="lg"

icon-only

(default)
icon-only="true"
icon-only="true" size="lg"

labels & class

custom label + copied-label
class="analytics-copy"

Attributes

AttributeTypeDefaultDescription
text *stringrequiredThe text to copy to the clipboard
labelstring"Copy"Button label shown before the copy
copied-labelstring"Copied"Label shown after a successful copy (for 2 seconds)
icon-onlybooleanfalseRender as an icon-only button. Label becomes aria-label.
sizesm | md | lgmdButton size. In both forms, maps to a 14 / 16 / 20px icon.
variantghost | outline | secondary | lightghostButton variant — pick it for context
tooltipstring—A collision-aware hover/focus tooltip (Bootstrap/Popper) — flips to stay on-screen
tooltip-placementauto | top | bottom | start | endautoPreferred tooltip side; auto picks the side with the most room

Behavior

Clipboard API with fallback

The component tries navigator.clipboard.writeText() first. If it fails (browser lacks the API or the user denied permission), it falls back to the classic textarea + document.execCommand('copy') pattern. If both fail, it fails silently — no error is thrown or shown to the user.

Icon and label swap

On successful copy, the icon swaps from clipboard to check, and the label swaps from label to copied-label. After 2 seconds, both revert automatically.

Accessibility

In button form, the label change serves as the announcement — screen readers will hear the new label. In icon-only form, the aria-label and title swap, so assistive tech knows the state changed.