# AttachmentPrimitive
URL: /docs/api-reference/primitives/Attachment

Components for displaying and managing file attachments in messages and composer.

***

title: AttachmentPrimitive
description: Components for displaying and managing file attachments in messages and composer.
----------------------------------------------------------------------------------------------

Buttons to interact with attachments.

import { ParametersTable } from "@/components/docs/tables/ParametersTable";
import { DataAttributesTable } from "@/components/docs/tables/DataAttributesTable";
import { Code } from "@radix-ui/themes";

<Callout>
  **Dual Use!** Attachments can appear in both messages and composers.
</Callout>

## Anatomy

```tsx
import { AttachmentPrimitive } from "@assistant-ui/react";

const MyMessageAttachment = () => (
  <AttachmentPrimitive.Root>
    <AttachmentPrimitive.Thumbnail />
    <AttachmentPrimitive.Name />
  </AttachmentPrimitive.Root>
);

const MyComposerAttachment = () => (
  <AttachmentPrimitive.Root>
    <AttachmentPrimitive.Thumbnail />
    <AttachmentPrimitive.Name />
    <AttachmentPrimitive.Remove />
  </AttachmentPrimitive.Root>
);
```

## API Reference

### Container

Containts all parts of the attachment.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="AttachmentPrimitiveRootProps"
  parameters={[
  {
    name: "asChild",
  },
]}
/>

### Thumbnail

The thumbnail of the attachment.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="AttachmentPrimitiveThumbnailProps"
  parameters={[
  {
    name: "asChild",
  },
]}
/>

### Name

The name of the attachment.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="AttachmentPrimitiveNameProps"
  parameters={[
  {
    name: "asChild",
  },
]}
/>

### Remove

Removes the attachment.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="AttachmentPrimitiveRemoveProps"
  parameters={[
  {
    name: "asChild",
  },
]}
/>