Attachment
A React component in Beamline's AI & agents category.
A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove.
Use it for
- Files attached to a composer, message or form.
Not for
- Choosing files (file-dropzone).
- Retrieved document chunks (context-cards).
Anatomy
- preview or type glyph
- name
- type · size, or progress, or error
- retry
- remove (20px drawn, 24px hit area)
- progress bar
- AttachmentList (role list, each child a list item)
- AttachmentGlyph / fileKind(name)
- shape: a card (the look's card radius); the preview or type tile and the open button's focus ring take the frame radius minus its inset (never more), so the corners stay concentric in every look, at any roundness and spacing
Variants
- size: sm, md
States
- ready
- uploading (announced)
- error (announced, Retry)
- openable (onOpen)
Keyboard
- The tile opens (if onOpen); Retry and Remove are named buttons; Remove appears on focus (always on touch screens).
Motion
Remove appears at once on hover and fades out over --motion-out; progress eases to each value. In an AttachmentList a new file grows in, the grid makes room, and a removed file fades where it stood (useFlip).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
file (required) | { id, name, size?, preview?, progress?, error? } | — | |
onRemove / onRetry / onOpen | (id) => void | — | |
size | "sm" | "md" | — | |
AttachmentList: label | string | — | |
style / ref | CSSProperties / native Ref | — | |
classNames | AttachmentClassNames | — |
Dependencies
lucide-react
Import
import { AttachmentGlyph, Attachment, AttachmentList } from "@/components/attachment/attachment";Get it
Attachment is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in AI & agents
- Approval card: The agent stops and asks before it acts: what it wants to do, exactly what that changes, any choices it needs, and Approve or Reject; both run your…
- Chat thread: People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing…
- Citations: Inline numbered citations that preview their source on hover or focus, plus a numbered source list; streamed answers flow in at an even pace with the…
- Context cards: The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how…
- Conversation: The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared…
- Flowchart: A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run…
- Image generation: The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives —…
- Message: One turn in a conversation with an agent: the person's words in a quiet bubble, the agent's answer on the page with its orb mark, trace, tool calls and…
- Plan: An agent's plan: numbered steps with live status, progress, and Approve / Edit / Reject when it needs sign-off; approving shows progress, and a refusal…
- Prompt bar: The agent composer: a field that grows, @ to add a source, / for a command, a model picker, files and dictation, and one button that sends with progress…
- Reasoning: The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off…
- Recommendation card: One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word…
- Response: An assistant's answer as streamed markdown in the system's reading type: bursty tokens flow in at an even pace, each new word fades in through a short…
- Selection actions: Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so…
- Task rows: Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while…
- Tool call: One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission…