Overview
tng-copy-button copies text to the clipboard on click and shows a brief “copied” state. Use variant (ghost | outline | solid) and size (sm | md). Project default content and [tngCopied] for the copied state. Styling is via the KlassFinal approach: rootKlass and contentWrapKlass are merged with defaults into finalRootKlass and finalContentWrapKlass; no hardcoded classes in the template.
Quick example
Basic
<tng-copy-button [text]="snippet()">
<span>Copy</span>
<span tngCopied>Copied</span>
</tng-copy-button>
import { TngCopyButton } from '@tailng-ui/ui/utilities';
snippet = computed(() => 'Text to copy');Features
Variant & size
variant: ghost | outline | solid. size: sm | md. Defaults drive base styles; override with rootKlass.
Slots
Default content for the button; project [tngCopied] for the content shown after copy (e.g. icon + “Copied”).
KlassFinal
rootKlass, contentWrapKlass. Computed finalRootKlass and finalContentWrapKlass merge defaults with overrides; no hardcoded class in HTML.