CopyButton
Small utility component for copying text values to the clipboard with optional toast feedback. Used inside components like
CodeBlock and QRCode to standardize UX.Source
LLM docs
Package
Examples
5
Properties
46
Playground
Basics
Icon-only copy button with default toast feedback.
Loading demo…
import { CopyButton } from '@plocks/ui';
export function Demo() {
return <CopyButton value="ABCD-1234" />;
}Labeled
Copy control showing label text instead of icon-only presentation.
Loading demo…
import { CopyButton } from '@plocks/ui';
export function Demo() {
return <CopyButton value="sk_live_1a2b3c4d5e6f7g8h9i10" iconOnly={false} label="Copy Key" />;
}Long Value
Values of any length are copied in full; the confirmation toast shows only its title and doesn't echo the copied text.
Loading demo…
import { CopyButton } from '@plocks/ui';
const longToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.long.payload.value.with.many.sections.and.characters.for.demo.purposes.only';
export function Demo() {
return <CopyButton value={longToken} iconOnly={false} label="Copy Token" />;
}No Toast
Copy control with toast notifications disabled.
Loading demo…
import { CopyButton } from '@plocks/ui';
export function Demo() {
return <CopyButton value="hunter2" iconOnly={false} disableToast />;
}Sizes
Scale the copy affordance with the
size prop, from xs through 3xl.Loading demo…
import { Block, CopyButton, Row, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Row align="center" gap="lg" wrap="wrap">
{SIZES.map((size) => (
<Block key={size} align="center">
<CopyButton size={size} value="@plocks/ui" />
<Text variant="small">{size}</Text>
</Block>
))}
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources