AttachmentCard
AttachmentCard is a pill-shaped card representing a single docked file — a file-type icon, a truncating title, and TYPE · 00.00 MB metadata, with optional loading and removable states.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { AttachmentCard } from '@adaptavant/eds-core';
Default
AttachmentCard represents a single docked file: a file-type icon, a truncating title, and its size.
const file = new File(['contents'], 'design-spec.pdf', {
type: 'application/pdf',
});
return <AttachmentCard file={file} />;
Sizes
AttachmentCard comes in two sizes: standard (48px, 32px icon) and large (56px, 40px icon). Left unset, size resolves responsively — large on mobile, standard elsewhere.
const file = new File(['contents'], 'design-spec.pdf', {
type: 'application/pdf',
});
return (
<Box className="flex flex-col gap-4">
<AttachmentCard file={file} size="standard" />
<AttachmentCard file={file} size="large" />
</Box>
);
Loading
When isLoading is true, a spinner replaces the metadata area to indicate the file is still uploading.
const file = new File(['contents'], 'design-spec.pdf', {
type: 'application/pdf',
});
return <AttachmentCard file={file} isLoading />;
Removable
Passing isRemovable shows a circular remove badge over the card's top-right corner. onRemove is required whenever isRemovable is true.
const [file, setFile] = React.useState(
new File(['contents'], 'design-spec.pdf', { type: 'application/pdf' })
);
if (!file) {
return null;
}
return (
<AttachmentCard file={file} isRemovable onRemove={() => setFile(null)} />
);
API Reference
AttachmentCard
| Prop | Default | Description |
|---|---|---|
file | _ | FileThe file this card represents. |
size? | _ | 'standard' | 'large'Omitting this is not the same as passing 'standard': left off, it resolves to large on mobile and standard elsewhere. Passed, it is honoured verbatim at every viewport. |
isLoading? | false | booleanShows the loading spinner. |
isRemovable? | false | booleanShows the dark circular close badge overlapping the top-right corner. Requires onRemove when true. |
onRemove? | _ | (event: React.MouseEvent<HTMLButtonElement>) => voidCalled when the remove badge is clicked. Required when isRemovable is true. |
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
AttachmentCard parts
const file = new File(['contents'], 'design-spec.pdf', {
type: 'application/pdf',
});
return (
<AttachmentCard
file={file}
isRemovable
onRemove={() => {}}
className="w-72"
classNames={{
iconTile: 'bg-caution',
title: 'text-link',
metadata: 'text-critical',
}}
/>
);
| Stylable Parts | Description |
|---|---|
| root | The card's outer container. |
| iconTile | Wraps the file-type icon. |
| content | Wraps the title and metadata text. |
| title | The truncating file name. |
| metadata | The TYPE · 00.00 MB text. |
| loading | Wraps the loading spinner, shown when isLoading is true. |
| removeBadge | The circular remove button, shown when isRemovable is true and isLoading is false. |