Copy ButtonnewNEW

A button component that copies text to clipboard with visual feedback.

<CopyButton size={4} text="Copy me!" />

Usage

import { CopyButton } from "@raystack/apsara/v1";
 
<CopyButton text="Text to copy" size={2} />;

Props

The CopyButton component extends IconButton props and accepts the following additional props

PropTypeDefault
text
string
-
resetTimeout
number
1000
resetIcon
boolean
true

All IconButton props are supported

Examples

Size

Like IconButton, CopyButton supports different sizes:

<Flex gap="medium" align="center">
  <CopyButton text="Copy me!" size={1} />
  <CopyButton text="Copy me!" size={2} />
  <CopyButton text="Copy me!" size={3} />
  <CopyButton text="Copy me!" size={4} />
</Flex>

States

The CopyButton inherits all states from IconButton

<Flex gap="medium" align="end">
  <CopyButton text="Copy me!" size={4} />
  <CopyButton text="Copy me!" size={4} disabled />
</Flex>

On this page