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

React implementation of Neo4j Design System

# Suggestion

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

## Props

### Suggestion

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` |  |  | The content of the suggestion |
| `isPrimary` | `boolean` |  |  | Whether the suggestion is primary. Renders an animated border. |
| `leadingVisual` | `ReactNode` |  |  | The visual to display before the content. Should be an icon. |
| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Callback function triggered when the suggestion is clicked |
| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'small'` |  | `small` | The size of the suggestion |

## Examples

### Default

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

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

const Component = () => {
  return <Suggestion>How do I get started with Aura?</Suggestion>;
};

export default Component;
```

### Icon

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

import { Suggestion } from '@neo4j-ndl/react/ai';
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <Suggestion size="small" leadingVisual={<MagnifyingGlassIconOutline />}>
      How do I get started with Aura?
    </Suggestion>
  );
};

export default Component;
```

### Primary

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

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

const Component = () => {
  return <Suggestion isPrimary>How do I get started with Aura?</Suggestion>;
};

export default Component;
```

### Sizes

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

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

const Component = () => {
  return (
    <div className="n-flex n-flex-row n-gap-token-8">
      <Suggestion size="small">This is a small suggestion</Suggestion>
      <Suggestion size="large">This is a large suggestion</Suggestion>
    </div>
  );
};

export default Component;
```