Components Media & code
CopyableCode
StableOne line of code with a copy button, for commands, keys and IDs.
CopyableCode suits installation commands, API endpoints and identifiers. An optional prompt such as `$` is shown but not copied. Long values scroll horizontally instead of wrapping.
Overview
npm install @bindshq/stance-tokensnpm install @bindshq/stance-reactimport { CopyableCode, Stack } from '@bindshq/stance-react';
export function Basic() {
return (
<Stack gap={2} style={{ width: '100%', maxWidth: 520 }}>
<CopyableCode
prompt="$"
value="npm install @bindshq/stance-tokens"
copyLabel="Copy tokens install command"
/>
<CopyableCode
prompt="$"
value="npm install @bindshq/stance-react"
copyLabel="Copy React install command"
/>
</Stack>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
npm install @bindshq/stance-tokensnpm install @bindshq/stance-reactnpm install @bindshq/stance-tokensnpm install @bindshq/stance-reactnpm install @bindshq/stance-tokensnpm install @bindshq/stance-reactImport
import { CopyableCode } from '@bindshq/stance-react';Examples
https://api.binds.si/v1/signaturesorg_8f2c91ae47import { CopyableCode, Stack } from '@bindshq/stance-react';
export function Identifiers() {
return (
<Stack gap={2} style={{ width: '100%', maxWidth: 420 }}>
<CopyableCode
size="sm"
value="https://api.binds.si/v1/signatures"
copyLabel="Copy API endpoint"
/>
<CopyableCode size="sm" value="org_8f2c91ae47" copyLabel="Copy organisation ID" />
</Stack>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value* required | string | None | Code to show and copy. |
prompt | string | None | Prefix shown but not copied. |
copyLabel | string | 'Copy to clipboard' | Accessible label of the copy button. |
size | 'sm' | 'md' | 'md' | Text and button size. |
Accessibility
- The prompt is aria-hidden.
- Copy confirmation is announced via the CopyButton live region.
Usage guidelines
Do
- Give each copy button a specific label when several appear together.
Don’t
- Use for multi-line code; use CodeBlock.