Copy button
VerifiedA ghost button that copies text and briefly shows a check, plus the useCopy hook.
When to use
- Use when
- Copying a snippet, command, or message to the clipboard.
- Avoid when
- Copying rich or large data that needs a progress state.
Installation
The source lands in src/components/ui/copy-button.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.
Usage
Built on
- Packages
- None
- Figma
- Optional native Figma library. See Designers.
Verified
- Size
- 0.6 kB gzipped on its own, 9.4 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
- Accessibility
- Axe passes on 2 stories
- Behavior
- 2 interaction tests in Storybook
- React Compiler
- Compiles with React Compiler
- React Doctor
- React Doctor finds nothing