Copy Button

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

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

Prop

Type

All IconButton props are supported

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
copy-buttonThe root <button> element
copy-button-iconsWrapper that swaps between the copy and check icons
copy-button-copy-iconThe copy icon
copy-button-check-iconThe check icon shown after copying
copy-button-statusVisually hidden live region announcing "Copied"

Examples

Size

Like IconButton, CopyButton supports different sizes:

1<Flex gap={5} 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={5} 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