ActionsLiquid Glass
Copy Button
Clipboard copy control with temporary copied feedback. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add copy-buttonCopy to clipboard
About this component
Copy Button is part of Actions. Clipboard copy control with temporary copied feedback.
Install with npx @intellihelper/cli@latest add copy-button. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Copy Button
Use when
- Use Copy Button when clipboard copy control with temporary copied feedback.
- Primary and secondary actions in product chrome or content panels.
- Copy, theme, or toggle interactions that should feel native to Liquid Glass.
Avoid when
- Navigation between major app sections — prefer links or navigation components.
- Destructive multi-step workflows without confirmation (pair with alert-dialog).
Accessibility notes
- Buttons must remain keyboard focusable with a visible focus ring.
- Disabled actions should use disabled semantics, not click handlers that no-op.
- Icon-only buttons require an accessible name.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Use content-layer variants for primary CTAs; chrome variants for toolbars.
- Group related actions with consistent size and shape (pill vs rounded).