Attachment
A compact chip for a linked file (icon, filename, and optional size/type) with an automatic image/PDF thumbnail, plus AttachmentGroup for a wrapped row of files.
Installation
npx dafink-ui add attachmentDemo
Composition
<AttachmentGroup>
</AttachmentGroup>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | - | The filename shown in the chip. Also used to infer the file-type icon and as the fallback title (full name on hover/truncation). |
| href | string | - | Link target for the file. When set, the primary control renders as a real <a>; otherwise a real <button type="button">. |
| size | string | - | Pre-formatted file size (e.g. "2.4 MB"), shown as secondary muted text. |
| type | string | - | Pre-formatted file type label (e.g. "PDF"), shown alongside size ("PDF · 2.4 MB"). |
| icon | 'file' | 'image' | 'video' | 'audio' | 'archive' | 'code' | inferred from name | Overrides the automatically inferred icon. |
| thumbnail | string | - | Image URL shown instead of the icon glyph. Defaults to href automatically for image-type attachments; pass explicitly for anything else (e.g. a PDF cover preview). |
| onClick | (event: MouseEvent) => void | - | Fires when the primary control (link or button) is activated. |
| className | string | '' | Additional classes merged onto the root chip wrapper. |