@neo4j-ndl/react/skills/ndl-react/components/code.md

React implementation of Neo4j Design System

# Code

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

## Props

### Code

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `children` | `ReactNode` |  |  | The content of the code |
| `description` | `string` |  |  | The description of the code, will be displayed in a tooltip |
| `isDisabled` | `boolean` |  | `false` | Whether the code is disabled |
| `isRunnable` | `boolean` |  | `false` | Whether the code is runnable |
| `onClick` | `((e: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void)` |  |  | The callback function triggered when the inline code is clicked |
| `ref` | `any` |  |  | A ref to apply to the root element. |

## Accessibility

## Implementation guidelines

For inline code, when interactive (`isRunnable` is true), the component becomes focusable and supports keyboard navigation with Enter and Space keys. When a `description` is provided, it's properly associated with the element via ARIA attributes.

## Examples

### Default

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

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

const Component = () => {
  return (
    <Code
      description="Copy to clipboard"
      onClick={() => alert('Copied to clipboard')}
    >
      :help cypher
    </Code>
  );
};

export default Component;
```

### Runnable

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

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

const Component = () => {
  return (
    <Code
      isRunnable
      description="Run query"
      onClick={() => alert(`Executing: :help cypher`)}
    >
      :help cypher
    </Code>
  );
};

export default Component;
```