Attachment
A file in a composer or message, with its upload state and actions.
Usage
import {
Attachment,
AttachmentAction,
AttachmentActions,
AttachmentContent,
AttachmentDescription,
AttachmentMedia,
AttachmentTitle,
} from "@zynactra/ui/attachment"<Attachment state="uploading">
<AttachmentMedia>
<Spinner />
</AttachmentMedia>
<AttachmentContent>
<AttachmentTitle>scope.pdf</AttachmentTitle>
<AttachmentDescription>Uploading · 64%</AttachmentDescription>
</AttachmentContent>
<AttachmentActions>
<AttachmentAction aria-label="Cancel upload">
<XIcon />
</AttachmentAction>
</AttachmentActions>
</Attachment>state is idle, uploading, processing, error or done and drives the styling. Sizes are default, sm and xs; orientation is horizontal or vertical. For image previews use <AttachmentMedia variant="image"> with an img inside. Lay several out with AttachmentGroup.
Guidelines
- Every action is an icon button, so every one needs
aria-labelnaming the file. - On error, say what to do ("Try again") and offer retry next to remove.
- Show progress as text in the description; don't rely on the spinner alone.