FileResultCard
StableA file the AI made, with what kind it is, a preview, Open and Download.
Also known as file card, download card, artifact card
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Files the AI made
Q3 support report.docx
Document · 6 pages
Refunds by region.xlsx
Making Refunds by region.xlsx
Board slides.pptx
Could not make this file.
<FileResultCard name="Q3 support report.docx" detail="6 pages" onOpen={open} onDownload={download} />
<FileResultCard name="Refunds by region.xlsx" status="making" />
<FileResultCard name="Board slides.pptx" status="failed" onRetry={retry} />A document, a spreadsheet still being made, and one that failed.
When to use it
Hands people the files the AI made in a form they recognise, with the two things they want: look at it, or keep it.
Made of: Preview or file icon · File name · Kind and size · Open · Download · Making or failed line
Use it for
- Documents, spreadsheets, slides and images the AI created.
- A file that is still being made, or that failed.
Not for
- A file the person attached: use AttachmentChip.
- An image the AI made, shown large: use MediaFrame.
- Editing the file next to the chat: use CanvasPanel.
Do and avoid
Q3 refunds.xlsx
Spreadsheet · 3 sheets
Here is your file: download
Do
- Show the real file name and its kind in words.
- Say when a file is still being made.
- Offer Try again when it fails.
Avoid
- Do not show a download link before the file exists.
- Do not show only an icon for the kind of file.
- Do not hide a failure; say it in words.
On a phone
- The buttons wrap under the name when the card is narrow.
- Long names end with an ellipsis; the full name is in the buttons' labels.
Seen in products
- Claude can create and edit files such as documents, spreadsheets and slides, and hands them back in the chat.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| namerequired | string | none | The file's name with its extension. |
| kind | "document" | "sheet" | "slides" | "pdf" | "image" | "code" | "file" | none | What kind of file it is. Worked out from the extension when omitted. |
| detail | string | none | Size or length, such as 24 KB or 8 slides. |
| preview | ReactNode | none | A small picture of the first page or the image itself. |
| status | "ready" | "making" | "failed" | "ready" | Whether the file is ready, still being made, or failed. |
| onOpen | () => void | none | Opens the file. The button is hidden when omitted. |
| onDownload | () => void | none | Downloads the file. The button is hidden when omitted. |
| onRetry | () => void | none | Tries again after a failure. |
| labels | FileResultCardLabels | none | Overrides kinds, open, download, retry, making(name) and failed. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one FileResultCard switches all of this from its properties panel, across 21 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Kind | kind | Document, Sheet, Slides, Pdf, Image, Code, File |
| Status | status | Ready, Making, Failed |
| Name | name | Any text |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- ready
- The kind of file in words, its size, a preview, Open and Download.
- making
- A spinner in place of the preview and Making followed by the name; the buttons wait.
- failed
- A red line says the file could not be made, with Try again.
- no preview
- An icon for the kind of file stands in for the preview.
Tokens
Change one of these and every part that uses it follows.
--surface--bg--line--fg-muted--danger-fg--radius-card--radius-control
Built in
- Open and Download include the file name in their labels.
- Making and failed are said in words and read out as a status.
- The preview is decoration; the name and kind carry the meaning.
What you need to do
- Use the real file name, with its extension, so the kind of file is clear.
- Give a size or length, such as 8 slides, when you know it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide