Anatomy

Import and assemble the component:

1import { CopyButton } from "@raystack/apsara";
2
3<CopyButton />

API Reference

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

All IconButton props are supported

Examples

Size

Like IconButton, CopyButton supports different sizes:

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

States

The CopyButton inherits all states from IconButton

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

Accessibility

• Uses button role with appropriate aria-label
• Announces copy confirmation to screen readers via aria-live region
• Supports keyboard activation with Enter and Space keys