Installation
bash
npx axis-cli add attachment-card --agenticUsage
tsx
import { AttachmentCard } from '@axis-ds/agentic-ui'
export function Example() {
return (
<div className="space-y-2">
<AttachmentCard
type="image"
name="screenshot.png"
size={245000}
status="complete"
onRemove={() => console.log('삭제')}
/>
<AttachmentCard
type="document"
name="report.pdf"
size={1250000}
status="uploading"
progress={65}
/>
</div>
)
}Interactive Demo
📄
analysis-report.pdf
3.1 MB
File Types
🖼️
photo.png
239.3 KB
📄
report.pdf
1.2 MB
💻
index.tsx
4.1 KB
📦
project.zip
14.9 MB
📎
data.bin
869.1 KB
States
Complete
🖼️
done.png
488.3 KB
Uploading
📄
uploading.pdf
1.9 MB45%
Error
📦
failed.zip
47.7 MB업로드 실패
Props
| Prop | Type | Default | Description |
|---|---|---|---|
typeRequired | "image" | "document" | "code" | "archive" | "other" | - | 파일 유형 |
nameRequired | string | - | 파일 이름 |
size | number | - | 파일 크기 (bytes) |
url | string | - | 파일 URL |
thumbnail | string | - | 이미지 썸네일 URL |
status | "uploading" | "complete" | "error" | "complete" | 파일 상태 |
progress | number | - | 업로드 진행률 (0-100) |
onRemove | () => void | - | 삭제 콜백 |
className | string | - | 추가 CSS 클래스 |
typeRequiredType:
"image" | "document" | "code" | "archive" | "other"파일 유형
nameRequiredType:
string파일 이름
sizeType:
numberDefault:
-파일 크기 (bytes)
urlType:
stringDefault:
-파일 URL
thumbnailType:
stringDefault:
-이미지 썸네일 URL
statusType:
"uploading" | "complete" | "error"Default:
"complete"파일 상태
progressType:
numberDefault:
-업로드 진행률 (0-100)
onRemoveType:
() => voidDefault:
-삭제 콜백
classNameType:
stringDefault:
-추가 CSS 클래스
Accessibility
카드는 role="article"로 마크업되고, 업로드 진행은 role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax로 전달됩니다.
| Key | Action |
|---|---|
| Tab | 카드 내 액션(삭제 등)으로 이동합니다. |
| Enter / Space | 포커스된 액션을 실행합니다. |
- 파일명이 접근 가능한 이름으로 노출됩니다.
- 액션 버튼에 aria-label이 제공됩니다.