AttachmentChip

A compact chip representing a file attached to a prompt, with file name, formatted size, and an optional remove button.

document.pdf239.3 KB

screenshot.png1.1 MB

data.csv8.2 KB

import { AttachmentChip } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add attachment-chip

Import

import.tsx

import { AttachmentChip } from "@aetherstack/ui"

Usage

attachmentchip.tsx

<AttachmentChip
  name="document.pdf"
  size={245000}
  onRemove={() => removeAttachment("document.pdf")}
/>

{/* With MIME type */}
<AttachmentChip
  name="screenshot.png"
  size={1200000}
  type="image/png"
  onRemove={() => removeAttachment("screenshot.png")}
/>

Props

Prop	Type	Default	Description
name*	string	—	File name displayed on the chip.
size	number	—	File size in bytes — formatted automatically (e.g. 245 KB).
type	string	—	MIME type used for display (e.g. image/png shows an image icon).
onRemove	() => void	—	When provided, renders a remove (×) button on the chip.
className	string	—	Additional CSS classes.

* Required

Accessibility

→Remove button has aria-label='Remove <filename>' so screen readers identify which file is being removed.
→Chip content is wrapped in a span with role='group' and an aria-label for the file name.