AttachmentTile

AttachmentTile

{/* in a composer's `attachments` slot */}
<AttachmentTile name="proposal-v3.pdf" size="1.4 MB" onRemove={() => remove(id)} />

{/* with a thumbnail */}
<AttachmentTile name="screenshot.png" size="320 KB" thumbnail="/u/scn.png" onRemove={…} />

{/* uploading */}
<AttachmentTile name="video.mov" size="220 MB" progress={42} />

Install: @helixui/core

import { AttachmentTile } from '@helixui/core'

status: stable · since: 0.3.0

Tags: file, attachment, upload, preview, tile

Anatomy

┌──────────────────────────────────────────┐
│  [thumb/icon]  filename.ext           [×] │
│                12 KB · uploading 60%      │
└──────────────────────────────────────────┘

Layout

• display — flex
• width — fill
• height — content
• intrinsicSize — ~56px tall, hugs available width
• stackable — true
• fullBleed — false

Visual

A horizontal tile with a square thumbnail or file-type icon on the left, name + meta in the middle (font.size.sm), and an optional remove button on the right. While uploading, a thin progress bar overlays the bottom edge.

Props

Name	Type	Default	Description
name	ReactNode	—	File name.
size	ReactNode	—	Pre-formatted size (‘1.4 MB’).
thumbnail	string	—	Image URL — when set, replaces the file glyph with a thumbnail.
icon	ReactNode	—	Custom icon node (overrides default file glyph).
progress	number	—	0–100. While set, shows a progress fill instead of remove.
onRemove	() => void	—	Show a close button that triggers this callback. Hidden during upload.
compact	boolean	false	Hide the size line and shrink padding (for inline use in messages).

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.brand.default, color.border.default, color.border.focus, color.text.primary, color.text.secondary, color.text.muted, radius.md, radius.sm, radius.full, space.2, font.family.sans, font.size.xs, font.size.sm, font.weight.medium

Accessibility

Notes

• Remove button has aria-label="Remove attachment".
• Progress is shown visually only — pair with a aria-live status if the user must hear it.

Composes with

Component	Relation	Note
ChatComposer	child	Common in the chat composer attachment row.
List	child	Each List row may render as an AttachmentTile.
ChatMessage	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

show an uploaded file

“render a docx attachment with a remove X”

<AttachmentTile name="report.docx" size="48 KB" onRemove={handleRemove} />

in-progress upload

“show upload progress on an image”

<AttachmentTile name="photo.jpg" size="2.4 MB" progress={0.6} />

Related

• ChatComposer
• ChatMessage