AI chat

Attachment

A file in a conversation or upload list, with its state.

import { Attachment } from "@flinbu/seed";

States and a group

tokens.jsonJSON · 48 KB

brand-kit.figUploading · 64%

export.zipProcessing

logo.svgToo large. Use a file under 5 MB.

dark.json

light.json

type-scale.css

spacing.json

import { Attachment, AttachmentGroup, Button } from "@flinbu/seed";

<div className="flex w-full max-w-xl flex-col gap-sm">
  <Attachment name="tokens.json" description="JSON · 48 KB" href="#" onRemove={() => {}} />
  <Attachment name="brand-kit.fig" state="uploading" progress={64} onRemove={() => {}} />
  <Attachment name="export.zip" state="processing" />
  <Attachment name="logo.svg" state="error" description="Too large. Use a file under 5 MB." actions={<Button variant="ghost" size="sm">Retry</Button>} onRemove={() => {}} />
  <AttachmentGroup>
    <Attachment name="dark.json" size="sm" />
    <Attachment name="light.json" size="sm" />
    <Attachment name="type-scale.css" size="sm" />
    <Attachment name="spacing.json" size="sm" />
  </AttachmentGroup>
</div>

Use it for

Files you send to Pluto.
Upload lists.

Use something else for

Big image galleries.

Props

Prop	Type	Default	Description
`name`	`string`	–	File name; picks the icon.
`description`	`ReactNode`	–	Type and size, or the error.
`state`	`'done''idle''uploading''processing''error'`	`'done'`	Upload state.
`progress`	`number`	–	0 to 100.
`src / icon`	`string / icon`	–	Preview or icon.
`onRemove / actions / href`	`…`	–	What you can do.
`size / orientation`	`'md''sm' / 'horizontal''vertical'`	–	Layout.

Accessibility

Busy rows carry aria-busy; errors are announced and say what to do.
Remove is named 'Remove <file>'.