Copy Button

A Button that writes value to the clipboard and confirms with a transient copied state. It is the general-purpose sibling of CodeBlock.CopyTrigger. Every Button prop (variant, size, colorScheme, …) passes straight through.

import { CopyButton, HStack } from "astralis-ui";

export function CopyButtonDemo() {
  return (
    <HStack gap="3">
      <CopyButton value="npm install astralis-ui" />
      <CopyButton value="https://astralis.dev" variant="outline" colorScheme="gray" size="sm">
        Copy link
      </CopyButton>
    </HStack>
  );
}

import { CopyButton } from "astralis-ui";

<CopyButton
  value="npm install astralis-ui"
>
  Copy
</CopyButton>

Import#

import { CopyButton } from "astralis-ui";

Usage#

value is what lands on the clipboard; the label is separate, so a button can say "Copy link" while copying the full URL. After a successful copy the label swaps to copiedLabel for timeout milliseconds, and the button carries a data-copied attribute you can style against. If the browser refuses clipboard access, the label stays put rather than claiming a copy that didn't happen.

import { CopyButton } from "astralis-ui";

export function CopyButtonLabels() {
  return (
    <CopyButton value="AST-7F3K-92QD" copiedLabel="Invite code copied" timeout={3000} variant="subtle">
      Copy invite code
    </CopyButton>
  );
}

Props#

Takes every Button prop except leftIcon, which the copied state owns. The ones that matter most:

Accessibility#

The copied state changes the button's label, but it isn't a live region, so a screen reader reports it only when the button is read again. Keep copiedLabel meaningful on its own ("Link copied" rather than "Done").