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.

Replay 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.

Replay 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.

Replay 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.

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

Group

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

Replay 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.

Replay 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.
classstringExtra 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.