File Card
ProA compact display component for file references showing a file-type icon, file name, file size, and action buttons (download, preview, delete). Used in upload zones, attachment lists, and file management interfaces.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard file card with icon, name, size, and action buttons. | Use for file attachments in forms, messages, and upload interfaces. |
| Compact | Single-line file display for dense attachment lists. | Use in comment threads and message attachments where space is limited. |
| With Preview | File card with a thumbnail preview for image and document files. | Use in galleries and media libraries where visual preview aids selection. |
Usage Guidelines
Do
Show the file type icon matching the file extension.
Don't
Show files without size information — users need to know before downloading.
Do
Display human-readable file sizes (2.4 MB, not 2400000 bytes).
Don't
Use generic file icons for all types — differentiate by extension.
Do
Include download and delete actions where appropriate.
Don't
Auto-download files on click — provide an explicit download action.
Code
Design Tokens
Accessibility
- File type icons should be aria-hidden since the file name and extension convey the type.
- Download buttons need aria-label describing the action — "Download design-system.fig".
- Delete actions should trigger a confirmation dialog before removing the file.