CopyButton

One-click copy with animated icon toggle — zero hook dependencies.

Overview

CopyButton wraps ActionBarPrimitive.Copy and provides a visual toggle between a copy icon and a check icon. The toggle is entirely CSS-driven using the data-copied attribute — no hooks needed.

Demo

Send a message, then hover over the assistant response to see the copy button. Click it to see the icon toggle.

<MessagePrimitive.Root>
  <MessagePrimitive.Content />
  <CopyButton />
</MessagePrimitive.Root>

<MessagePrimitive.Root>
  <MessagePrimitive.Content />

  <ActionBarPrimitive.Copy asChild>
    <button className="group ...">
      {/* Conditional icon based on copied state */}
      <CopyIcon className="group-data-[copied]:hidden" />
      <CheckIcon className="hidden group-data-[copied]:block" />
    </button>
  </ActionBarPrimitive.Copy>
</MessagePrimitive.Root>

How It Works

1. ActionBarPrimitive.Copy handles the clipboard API call
2. After copying, it sets a data-copied attribute on the button for copiedDuration ms
3. CopyButtonVisual uses Tailwind's group-data-[copied] variant to swap icons
4. No state hooks required — purely CSS-driven

Props

Underlying Primitives

• ActionBarPrimitive.Copy — handles clipboard and data-copied attribute
• Must be rendered inside a message context (MessagePrimitive.Root)