@neo4j-ndl/react/skills/ndl-react/components/ai/file-tag.md

React implementation of Neo4j Design System

# FileTag

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

## Props

### FileTag

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `fileName` | `string` | ✅ |  | The name of the file |
| `fileType` | `string` | ✅ |  | The type of the file, e.g. 'pdf', 'docx', 'txt', etc. |
| `icon` | `ReactNode` | ✅ |  | The icon that represents the file type |
| `isLoading` | `boolean` |  | `false` | Whether the file tag is loading |
| `isRemovable` | `boolean` |  | `false` | Whether the file tag is removable |
| `onClick` | `((e: MouseEvent<HTMLElement, MouseEvent>) => void)` |  |  | Callback function triggered either when the file tag is clicked, or when the remove button is clicked (if isRemovable is true) |
| `ref` | `any` |  |  | A ref to apply to the root element. |

## Examples

### Chat

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

import { FileTag } from '@neo4j-ndl/react/ai';
import { DocumentIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <FileTag
      icon={<DocumentIconOutline />}
      fileName="Science Fiction Bestsellers"
      fileType="pdf"
    />
  );
};

export default Component;
```

### Loading

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

import { FileTag } from '@neo4j-ndl/react/ai';
import { DocumentIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <FileTag
      isLoading={true}
      icon={<DocumentIconOutline />}
      fileName="Science Fiction Bestsellers"
      fileType="pdf"
      onClick={() => {
        alert('remove file');
      }}
    />
  );
};

export default Component;
```

### Prompt

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

import { FileTag } from '@neo4j-ndl/react/ai';
import { DocumentIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <FileTag
      icon={<DocumentIconOutline />}
      fileName="Science Fiction Bestsellers"
      fileType="pdf"
      isRemovable={true}
      onClick={() => {
        alert('remove file');
      }}
    />
  );
};

export default Component;
```