Toggle Sidebar B
AppearanceLight & dark mode D

Attachment

Renders files and images with media, metadata, upload state, actions, and a full-card trigger that keeps the action buttons separately clickable.

Default

A horizontal file card: media icon, title and metadata, and a remove action.

Dark previewReplay preview
Proposal.pdf2.4 MB

Image

AttachmentMedia variant="image" renders a thumbnail; vertical orientation stacks the media over the content with actions floated on top.

Dark previewReplay preview
cover-art.png1200 × 800
screenshot.jpg640 KB

Upload state

state drives the styling: idle is dashed, error turns destructive, and uploading/processing shimmer the title.

Dark previewReplay preview
proposal.pdf2.4 MB
cover-art.pngUploading…
clip.mp4Processing…
broken.zipUpload failed
Drop a fileidle uses a dashed border

Sizes & orientation

default, sm, and xs sizes, plus a vertical orientation.

Dark previewReplay preview
default.txtsize="default"
small.txtsize="sm"
track.mp3xs + vertical

Group

AttachmentGroup is a horizontal, snapping row with scroll-fade edges.

Dark previewReplay preview
file-1.txt12 KB
file-2.txt24 KB
file-3.txt36 KB
file-4.txt48 KB
file-5.txt60 KB
file-6.txt72 KB
file-7.txt84 KB
file-8.txt96 KB

Full-card trigger

AttachmentTrigger overlays the whole card to open it, while AttachmentAction buttons stay independently clickable above it.

Dark previewReplay preview
proposal.pdfThe whole card opens it

API Reference

Attachment

PropTypeDefaultDescription
state"idle" | "uploading" | "processing" | "error" | "done""done"Upload lifecycle; sets data-state for descendant styling.
size"default" | "sm" | "xs""default"Padding, gap, and radius scale.
orientation"horizontal" | "vertical""horizontal"Layout direction of media and content.
classstring—Extra classes, merged with cn().
SlotDescription
defaultMedia, content, actions, trigger.

AttachmentMedia

PropTypeDefaultDescription
variant"icon" | "image""icon"icon centers a glyph; image covers with an <img>.
SlotDescription
defaultIcon or image.

AttachmentAction

PropTypeDefaultDescription
variantButton variant"ghost"Forwarded to Button.
sizeButton size"iconXs"Forwarded to Button.
SlotDescription
defaultAction icon.

AttachmentTrigger

PropTypeDefaultDescription
asChildbooleanfalseRender as the child element via reka-ui Primitive.

AttachmentGroup

SlotDescription
defaultA row of Attachment cards.