# CopyableCode

> One line of code with a copy button, for commands, keys and IDs.

Category: Media & code · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/copyable-code

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.

## Import

```tsx
import { CopyableCode } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Install command

```tsx
import { 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>
  );
}
```

### Identifiers

```tsx
import { 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

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| CopyableCode | `value` (required) | `string` | None | Code to show and copy. |
| CopyableCode | `prompt` | `string` | None | Prefix shown but not copied. |
| CopyableCode | `copyLabel` | `string` | `'Copy to clipboard'` | Accessible label of the copy button. |
| CopyableCode | `size` | `'sm' \| 'md'` | `'md'` | Text and button size. |

## Accessibility

- The prompt is aria-hidden.
- Copy confirmation is announced via the CopyButton live region.

## Guidelines

**Do**

- Give each copy button a specific label when several appear together.

**Don’t**

- Use for multi-line code; use CodeBlock.

## Related

- https://stanceui.com/components/copy-button
- https://stanceui.com/components/code-block