FilePreview
Compact file, code, and media thumbnails for file attachment metadata.
PDFZIPHTMLIMGMP4
import {
FilePreview,
FilePreviewBadge,
FilePreviewDocument,
} from "raft-ui";
<FilePreview>
<FilePreviewDocument />
<FilePreviewBadge>PDF</FilePreviewBadge>
</FilePreview>PDFDOCXTXT
PDFquarterly-report.pdf
ZIPdesign-assets.zip
ZIPHTMLIMG
FilePreviewMedia owns the frame, crop, and rounding. Supply an image, video, SVG, or other preview through children.
PNGMP4JPG
...propsspan props
Preview root and positioning context for the visual part and badge.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Preview root and positioning context for the visual part and badge. |
...propsspan props
Document-sheet illustration.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Document-sheet illustration. |
...propsspan props
Archive/file illustration.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Archive/file illustration. |
...propsspan props
Code-file illustration.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Code-file illustration. |
...propsspan props
Cropped media frame. Pass image, video, SVG, or other decorative preview content as children; image and video thumbnails typically use size-full object-cover.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Cropped media frame. Pass image, video, SVG, or other decorative preview content as children; image and video thumbnails typically use size-full object-cover. |
placementdefault: "corner""corner" | "inline"
corner tags the bottom-right of a FilePreview icon; inline is a fixed-width chip of its own, placed before a file name in a row or a head.
...propsuseRender.ComponentProps<"span">
Format label such as PDF or TXT.
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "corner" | "inline" | "corner" | corner tags the bottom-right of a FilePreview icon; inline is a fixed-width chip of its own, placed before a file name in a row or a head. |
...props | useRender.ComponentProps<"span"> | — | Format label such as PDF or TXT. |