# FilePreview

> A small icon that shows a file's type — a document, an archive, code or a media thumbnail — with a chip that names the type.

Source: https://raft-design.botiverse.build/components/file-preview. Generated from the current release; where it differs from what you remember, this page is right.

A 40px icon that shows what kind of file something is: a page for a document, an archive, a code sheet, or a thumbnail of an image or video, with a small chip that names the type. It stands before a file's name wherever files are listed.

```tsx
import {
  FilePreview,
  FilePreviewBadge,
  FilePreviewCode,
  FilePreviewDocument,
  FilePreviewFile,
  FilePreviewMedia,
} from "@botiverse/raft-ui";

import { COMPOSER_IMAGE_SRC } from "#/modules/chat-composer/composer-image.ts";

export function FilePreviewDefaultContent() {
  return (
    <>
      <FilePreview>
        <FilePreviewDocument />
        <FilePreviewBadge>PDF</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewFile />
        <FilePreviewBadge>ZIP</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewCode />
        <FilePreviewBadge>HTML</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewMedia>
          <span className="absolute right-0 bottom-0 left-0 h-2.5 bg-linear-to-t from-success/30 to-transparent" />
          <span className="absolute bottom-0.5 left-0.5 h-2 w-5 rounded-t-full bg-success/40" />
          <span className="absolute right-1 bottom-0.5 h-3 w-4 rounded-t-full bg-success-hover/40" />
          <span className="absolute top-1 right-1 size-1.5 rounded-full bg-warning/60" />
        </FilePreviewMedia>
        <FilePreviewBadge>IMG</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewMedia>
          <video
            className="size-full object-cover"
            muted
            playsInline
            poster={COMPOSER_IMAGE_SRC}
            preload="metadata"
          />
        </FilePreviewMedia>
        <FilePreviewBadge>MP4</FilePreviewBadge>
      </FilePreview>
    </>
  );
}
```

## When to use

| Situation                                  | Use                                                                              |
| ------------------------------------------ | -------------------------------------------------------------------------------- |
| A file in the composer, before it is sent  | FilePreview, in the composer's attachment ([Composer](https://raft-design.botiverse.build/components/composer.md))  |
| A file in a list of files                  | FilePreview at the start of the row                                              |
| The type, next to a name in a line of text | `FilePreviewBadge` with `placement="inline"`                                     |
| A file attached to a sent message          | The file card ([MessageAttachment](https://raft-design.botiverse.build/components/message-attachment.md)) |

## Anatomy

- `FilePreview`: the 40px box. Required.
- One drawing of the file, required:
  - `FilePreviewDocument`: a page with lines, for documents;
  - `FilePreviewCode`: a sheet of code;
  - `FilePreviewFile`: an archive or any other file;
  - `FilePreviewMedia`: a thumbnail; put the image or a video poster inside.
- `FilePreviewBadge`: the type chip. On the icon it sits at the bottom corner (`placement="corner"`); in a line of text it stands before the name (`placement="inline"`).

## Variants

| Variant  | Use for                                   |
| -------- | ----------------------------------------- |
| Document | PDF, DOCX, TXT and other documents        |
| Code     | Source files, HTML                        |
| File     | Archives and anything else                |
| Media    | Images and video, showing the file itself |

```tsx
import { FilePreview, FilePreviewBadge, FilePreviewDocument } from "@botiverse/raft-ui";

export function FilePreviewFormatsContent() {
  return (
    <>
      <FilePreview>
        <FilePreviewDocument />
        <FilePreviewBadge>PDF</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewDocument />
        <FilePreviewBadge>DOCX</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewDocument />
        <FilePreviewBadge>TXT</FilePreviewBadge>
      </FilePreview>
    </>
  );
}
```

```tsx
import { FilePreview, FilePreviewBadge, FilePreviewMedia } from "@botiverse/raft-ui";

import { COMPOSER_IMAGE_SRC } from "#/modules/chat-composer/composer-image.ts";

export function FilePreviewMediaContent() {
  return (
    <>
      <FilePreview>
        <FilePreviewMedia>
          <img alt="" className="size-full object-cover" src={COMPOSER_IMAGE_SRC} />
        </FilePreviewMedia>
        <FilePreviewBadge>PNG</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewMedia>
          <video
            className="size-full object-cover"
            muted
            playsInline
            poster={COMPOSER_IMAGE_SRC}
            preload="metadata"
          />
        </FilePreviewMedia>
        <FilePreviewBadge>MP4</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewMedia>
          <img alt="" className="size-full object-cover" src={COMPOSER_IMAGE_SRC} />
        </FilePreviewMedia>
        <FilePreviewBadge>JPG</FilePreviewBadge>
      </FilePreview>
    </>
  );
}
```

```tsx
import {
  FilePreview,
  FilePreviewBadge,
  FilePreviewCode,
  FilePreviewFile,
  FilePreviewMedia,
} from "@botiverse/raft-ui";

export function FilePreviewIllustrationsContent() {
  return (
    <>
      <FilePreview>
        <FilePreviewFile />
        <FilePreviewBadge>ZIP</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewCode />
        <FilePreviewBadge>HTML</FilePreviewBadge>
      </FilePreview>
      <FilePreview>
        <FilePreviewMedia>
          <span className="absolute right-0 bottom-0 left-0 h-2.5 bg-linear-to-t from-success/30 to-transparent" />
          <span className="absolute bottom-0.5 left-0.5 h-2 w-5 rounded-t-full bg-success/40" />
          <span className="absolute right-1 bottom-0.5 h-3 w-4 rounded-t-full bg-success-hover/40" />
          <span className="absolute top-1 right-1 size-1.5 rounded-full bg-warning/60" />
        </FilePreviewMedia>
        <FilePreviewBadge>IMG</FilePreviewBadge>
      </FilePreview>
    </>
  );
}
```

```tsx
import { FilePreviewBadge } from "@botiverse/raft-ui";

export function FilePreviewInlineBadgeComposition() {
  return (
    <div className="grid gap-2 text-sm text-foreground">
      <div className="flex items-center gap-2">
        <FilePreviewBadge placement="inline">PDF</FilePreviewBadge>
        <span>quarterly-report.pdf</span>
      </div>
      <div className="flex items-center gap-2">
        <FilePreviewBadge placement="inline">ZIP</FilePreviewBadge>
        <span>design-assets.zip</span>
      </div>
    </div>
  );
}
```

## Content

- Name documents by their extension in the badge: PDF, DOCX, TXT.
- For code, images and other files, let the drawing say the type.
- Write the extension in capitals. It is an abbreviation, not all-caps styling ([Typography](https://raft-design.botiverse.build/foundations/typography.md#casing)).

## Accessibility

- The drawings are decorative and hidden from assistive technology. The file name next to the icon says what the file is; don't rely on the icon alone.
- The badge text is read as written.

## Rules

- Keep the type chip neutral: `fill-muted` with a hairline, Space Mono. The name beside it carries the meaning, so the type doesn't get a color.
- Don't color a file by its type: a color that means nothing is removed ([Color](https://raft-design.botiverse.build/foundations/color.md)). Only a media thumbnail shows color, because it is the file itself.

## API

### FilePreview

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

### FilePreviewBadge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placement` | `"inline" \| "corner"` | `"corner"` |  |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

### FilePreviewCode

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

### FilePreviewDocument

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

### FilePreviewFile

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

### FilePreviewMedia

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

## Changes

- 0.6.0 (Breaking Changes): **Props that no longer change anything are removed:** `Badge` `uppercase`; `Checkbox` `size`, `variant`, `color`; `Status` `pulse`, `attention` (status never animates); `Switch` / `SwitchThumb` `size`; `SidebarItem` `variant`; `SidebarItemCount` / `SidebarItemIndicator` `variant` and `appearance` (the count is always the pink sticker, the indicator the yellow @); `NotificationCenterActionButton` `variant`; `DrawerContent` `width` (one-go forms use the wide `Dialog`); `AppRailItemIndicator` `attention`; `AppRailItemAttention` `children`; `Steps` `size`, `track`, `renderIndicator`, `renderTraveler`; `FilePreviewBadge` `type`, `color`. Remove them at call sites.
- 0.6.0 (Added): `FilePreviewBadge` `placement="inline"`: the file-type chip before a name (`"corner"` stays the default).
- 0.1.0 (Added): Added `ConversationPanel`, `ThreadPanel`, `Panel`, `ScrollArea`, `FilePreview`, `RaftLogo` / lockup / wordmark, and `MobileNav`.