Skip to content

Attachment

A file on a message or in a composer, with its upload state. Busy states show the Spinner and say what's happening; errors use the danger tone and a reason.

Sourcecomponents/attachment.tsx

States

brief.pdf2.4 MB
screens.zip, Uploading62% · 18 MB
notes.docx, ProcessingReading the file
logo.svg, Upload failedOver the 10 MB limit
Drop a file herePDF, PNG or ZIP

A group, with an openable card

brief.pdf2.4 MB
hero.png1.1 MB
tokens.css

Usage

Attachment usage
import { FileText, X } from "lucide-react";import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle } from "@/components/attachment";
export function AttachmentUsage({ remove }: { remove: () => void }) {  return (    <Attachment state="uploading">      <AttachmentMedia>        <FileText />      </AttachmentMedia>      <AttachmentContent>        <AttachmentTitle>brief.pdf</AttachmentTitle>        <AttachmentDescription>2.4 MB</AttachmentDescription>      </AttachmentContent>      <AttachmentActions>        <AttachmentAction aria-label="Remove brief.pdf" onClick={remove}>          <X />        </AttachmentAction>      </AttachmentActions>    </Attachment>  );}

When to use

Use when

A file on a message or in a composer, with its upload state. Name its actions after the file ("Remove brief.pdf")

Don’t use when

A file list in settings or a table (use Item or Data Table)