@neo4j-ndl/react/skills/ndl-react/components/ai/presence.md

React implementation of Neo4j Design System

# Presence

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

## Props

### Presence

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `isThinking` | `boolean` |  | `false` | Whether the AI is thinking. Animates the underlying SVG |
| `ref` | `Ref<SVGSVGElement>` |  |  | A ref to apply to the root element. |

## Examples

### Ai Presence Default

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

import { FilledButton } from '@neo4j-ndl/react';
import { Presence } from '@neo4j-ndl/react/ai';
import { useState } from 'react';

const Component = () => {
  const [isThinking, setIsThinking] = useState(false);

  return (
    <div className="n-flex n-gap-token-8">
      <Presence className="n-size-token-32" isThinking={isThinking} />
      <FilledButton onClick={() => setIsThinking(!isThinking)}>
        Toggle Thinking
      </FilledButton>
    </div>
  );
};

export default Component;
```

### Ai Presence Thinking

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

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

// TODO: consider this story when happo is ready
const Component = () => {
  return <Presence isThinking className="n-size-token-32" />;
};

export default Component;
```