Attachment

Use attachment to represent an uploaded or attachable file — in a chat composer, a file list, or an upload queue. Set state to "idle", "uploading", "processing", "error", or "done" to drive the built-in loading and error styling, and group several with AttachmentGroup for a horizontally scrollable row.

<script setup lang="ts">
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentGroup,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment";
import { FileIcon, XIcon } from "@lucide/vue";
</script>

<template>
  <AttachmentGroup>
    <Attachment state="done">
      <AttachmentMedia>
        <FileIcon />
      </AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>report.pdf</AttachmentTitle>
        <AttachmentDescription>1.2 MB</AttachmentDescription>
      </AttachmentContent>
      <AttachmentActions>
        <AttachmentAction aria-label="Remove attachment">
          <XIcon />
        </AttachmentAction>
      </AttachmentActions>
    </Attachment>
  </AttachmentGroup>
</template>

AttachmentTrigger overlays the whole card to make it clickable (for example, to open a preview), and AttachmentAction reuses Button's variants so actions like remove or retry stay consistent with the rest of the design system.

Installation

Usage