Components / Collections
File thumbnail
An image preview or a file-type tile for file lists.
@fabrials/ui
landscape.pngimage/png- report.pdfapplication/pdf
- export.csvtext/csv
- voice-memo.m4aaudio/mp4
- backup.tar.gzapplication/gzip
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { FileThumb, fileTypeLabel } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
src | string | null | Image to preview. A broken image falls back to the tile. |
mime | string | null | Labels the tile with filename, for example PDF or CSV. |
icon | ReactNode | Replaces the default tile icon. |
size | number | Square size in pixels. |
alt | string | Text alternative for the preview. |
Behavior
fileTypeLabel returns the same short label for use elsewhere. The host decides which URLs are safe to preview.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.