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
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. |
| onRemove | () => void | - | Renders a small remove (✕) button inside the chip, after the primary control, labelled "Remove {name}". Omit it and no remove button is rendered. |
| compact | boolean | false | Smaller text, padding, icon and thumbnail, with a 160px max width instead of 240px, so longer filenames truncate with an ellipsis sooner. Suited to tight spots like a composer or message bubble. |
| className | string | '' | Additional classes merged onto the root chip wrapper. |
Accessibility
Attachment has no custom focus management: its primary control is a real <a href> when href is set, or a real <button type="button"> otherwise, so it's never left keyboard-unreachable just because no URL was given. When onRemove is supplied, the remove button is a second, independent Tab stop as a sibling of the primary control (never nested inside it), each with its own native activation and visible focus ring — no roving tabindex, no custom key handling. The thumbnail image, when shown, is alt="" since it's redundant with the adjacent filename text, and AttachmentGroup renders a native <ul>/<li> list so assistive tech announces the attached-file count.
| Key | Function |
|---|---|
| tab | Moves focus to the primary control, then to the remove button (when onRemove is set), in normal document order. |
| shift+tab | Same as Tab, in reverse. |