Avala Design
← Components/primitives

Copy

Copy + CopyButton — primitives.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Copy, CopyButton } from "@avala/design";

<Copy>
  <CopyButton />
</Copy>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-copy--defaultOpen in Storybook →

When to use

  • Reveal a small "Copy" affordance next to API keys, tokens, code snippets, share links.
  • Pair with `CodeSnippet` (which already includes Copy internally).

When not to use

  • A primary form button that happens to copy → use `Button` and call your own clipboard API.
  • Code blocks → use `CodeSnippet` directly; it includes Copy.