Copy Button

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

Overview

CopyButton is an IconButton wired to the clipboard: pass the text to copy and it handles the click, swaps the copy icon for a check, and announces "Copied" to screen readers. The check icon reverts after resetTimeout (default 1000ms); set resetIcon={false} to keep it. Drop it next to code snippets, API keys, and IDs. If you need copy behavior with your own UI, use the useCopyToClipboard hook from @raystack/apsara/hooks instead.

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 sizes 1 through 4. Default is 2.

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

CopyButton inherits all IconButton states. A disabled button ignores clicks and never triggers a copy.

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