@neo4j-ndl/react/skills/ndl-react/components/clipboard-button.md

React implementation of Neo4j Design System

# ClipboardButton

Import: `import { ClipboardButton } from '@neo4j-ndl/react'`

## Props

### ClipboardButton

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `descriptionKbdProps` | `(KbdProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>)` |  |  |  |
| `isDisabled` | `boolean` |  |  |  |
| `size` | `'large' \| 'medium' \| 'small'` |  |  |  |
| `textToCopy` | `string` | ✅ |  | The text that should be set to users clipboard |
| `tooltipProps` | `Omit<TooltipProps, "children">` |  |  |  |
| `type` | `'clean-icon-button' \| 'icon-button' \| 'outlined-button'` |  | `clean-icon-button` |  |

For more information of the `TooltipProps` type, see the Tooltip component documentation.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ClipboardButton } from '@neo4j-ndl/react';

const Component = () => {
  return <ClipboardButton textToCopy="This is the text to copy" />;
};

export default Component;
```

### Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ClipboardButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <ClipboardButton textToCopy="This is the text to copy" isDisabled={true} />
  );
};

export default Component;
```

### Keyboard Shortcut

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ClipboardButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <ClipboardButton
      textToCopy="This is the text to copy"
      descriptionKbdProps={{
        keys: ['c'],
        modifierKeys: ['ctrl', 'shift'],
      }}
    />
  );
};

export default Component;
```

### Not Clean

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ClipboardButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <ClipboardButton textToCopy="This is the text to copy" type="icon-button" />
  );
};

export default Component;
```

### Not Icon Button

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ClipboardButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <ClipboardButton
      type="outlined-button"
      textToCopy="This is the text to copy"
    />
  );
};

export default Component;
```

### Sizes

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ClipboardButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16">
      <ClipboardButton textToCopy="This is the text to copy" size="small" />
      <ClipboardButton textToCopy="This is the text to copy" size="medium" />
      <ClipboardButton textToCopy="This is the text to copy" size="large" />
    </div>
  );
};

export default Component;
```

### Tooltip

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ClipboardButton } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <ClipboardButton
      textToCopy="This is the text to copy"
      tooltipProps={{
        hoverDelay: {
          close: 100,
          open: 100,
        },
        isInitialOpen: true,
        placement: 'right',
        type: 'simple',
      }}
    />
  );
};

export default Component;
```