Skip to main content
The CopyButton component provides a one-click solution for copying text to the clipboard. It shows visual feedback when text is successfully copied.

​
Usage

import { CopyButton } from '@raystack/apsara';

export default function Example() {
  return (
    <CopyButton 
      text="Text to copy" 
      aria-label="Copy to clipboard"
    />
  );
}

​
With code snippet

import { CopyButton } from '@raystack/apsara';
import { Flex } from '@raystack/apsara';

export default function CodeExample() {
  const code = `npm install @raystack/apsara`;
  
  return (
    <Flex align="center" gap="2">
      <code>{code}</code>
      <CopyButton text={code} size={2} />
    </Flex>
  );
}

​
Custom timeout

{/* Reset icon after 3 seconds */}
<CopyButton 
  text="Custom timeout" 
  resetTimeout={3000}
  aria-label="Copy"
/>

​
Disable icon reset

{/* Keep success icon after copying */}
<CopyButton 
  text="No reset" 
  resetIcon={false}
  aria-label="Copy"
/>

​
API reference

​
CopyButton

Extends all props from IconButton.
​
text
string
required
The text to copy to clipboard when the button is clicked.
​
resetTimeout
number
default:"1000"
Time in milliseconds before the icon resets to the copy icon after successful copy.
​
resetIcon
boolean
default:"true"
Whether to reset the icon back to the copy icon after the timeout. If false, the success icon persists.
​
size
1 | 2 | 3 | 4
default:"2"
The size of the button.
​
aria-label
string
Accessible label for the button. Recommended for accessibility.
​
className
string
Additional CSS class for the button.
​
onClick
(event: MouseEvent) => void
Click handler. The copy action is handled automatically.