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

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

Buttons to interact with attachments.

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

Anatomy \[#anatomy]

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

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

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

API Reference \[#api-reference]

Root \[#root]

Contains all parts of the attachment.

This primitive renders a `<div>` element unless `asChild` is set. Accepts all standard HTML div element props.

<ParametersTable
  type="AttachmentPrimitiveRootProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
{
name: &#x22;...props&#x22;,
type: &#x22;HTMLAttributes<HTMLDivElement>&#x22;,
description: &#x22;All standard div element props are forwarded to the underlying element.&#x22;,
},
]"
/>

unstable\_Thumb \[#unstable\_thumb]

The thumbnail of the attachment.

This primitive renders a `<div>` element unless `asChild` is set. Accepts all standard HTML div element props.

<ParametersTable
  type="AttachmentPrimitiveThumbProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
{
name: &#x22;...props&#x22;,
type: &#x22;HTMLAttributes<HTMLDivElement>&#x22;,
description: &#x22;All standard div element props are forwarded to the underlying element.&#x22;,
},
]"
/>

Name \[#name]

The name of the attachment.

This primitive renders a text node with the attachment's file name. It accepts no props.

<ParametersTable type="AttachmentPrimitiveNameProps" parameters="[]" />

Remove \[#remove]

Removes the attachment.

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

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