# Attachment

> File chip or preview tile for prompt attachments, with an optional remove button.

Source: https://ui.jcsoftdev.com/docs/components/attachment

File chip or preview tile for prompt attachments, with an optional remove button.

## Import

```ts
import { Attachment } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/attachment`.

## Usage

```tsx
<Attachment
  name="agenda-sabado.pdf"
  size="240 KB"
  variant="chip"
  status="done"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` * | `string` |  |  |
| `size` | `string` |  | Pre-formatted size, e.g. `240 KB`. |
| `previewSrc` | `string` |  | Image URL (or object URL). Without it a document icon is shown. |
| `status` | `"done" \| "uploading" \| "error"` | `"done"` |  |
| `progress` | `number` |  | 0-100, only for `uploading`. |
| `variant` | `"chip" \| "preview"` | `"chip"` | `chip` is one compact line; `preview` is a tile with a larger thumbnail. |
| `onRemove` | `(() => void)` |  | Shows the remove button. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/ai-attachment--default)
- [Uploading](/storybook/?path=/story/ai-attachment--uploading)
- [Failed](/storybook/?path=/story/ai-attachment--failed)
- [Preview](/storybook/?path=/story/ai-attachment--preview)
- [Narrow](/storybook/?path=/story/ai-attachment--narrow)
- [Preset Brutal](/storybook/?path=/story/ai-attachment--preset-brutal)

## Source

`packages/ui/src/ai/attachment/attachment.tsx`