Attachment | Glaze design system

Sizes

When to use it

Use: Files on a prompt or a message: screenshots, policies, exports.
Use: A form or settings screen takes files: AttachmentDrop variant="zone".
Use: A composer or a panel takes files dropped on it: AttachmentDrop around it.
Not for: A person or an agent. Use Avatar.
Not for: A link to a page. Use Item.

6 rules

Never: Put a bare <input type="file"> on screen; use AttachmentDrop with an AttachmentDropTrigger. Because the native input has no drag judgement, no reasons and a look Glaze cannot reach, while the trigger opens the same picker.
Must: Show a refused or failed file as state="error" with the reason in AttachmentDescription. Because a file that silently vanishes makes the person try again, and rejectionReason already says why in words.
Must: Name every AttachmentAction with the file: "Remove refund-policy.pdf". Because a group of chips each with a "Remove" button gives a screen reader five identical names.
Must: Give AttachmentProgress a label naming the file, and write the bytes in AttachmentDescription. Because the 2px bar is the progressbar's only visible part, and "1.2 of 4.8 MB" says what is left.
Never: Put glass, a tint or a shadow on an Attachment chip. Because the chip is not pressed, and a raised chip reads as a button beside the composer's send.
Should: Say what the zone takes in AttachmentDropDescription: types and the size limit. Because the overlay can refuse a type during a drag, but only the words tell the person before they try.

4 checks

: A busy chip is aria-busy; AttachmentProgress is a named progressbar with the percent.
: The drag overlay is aria-hidden; the trigger is the way in for keyboard and screen reader users.
: The file name is whole in the DOM even when cut in the middle.
: The error reason is in the failure word colour, 5.9:1, and in words.

2 keys

6 edge cases

Wrong type dragged: The overlay turns coral and says what the region takes before the drop.
Extension-only accept: Judged on drop, since a drag shows types and not names.
Regions nested: The inner one takes the drop; the outer one shows nothing.
Same file picked twice: The picker fires again.
Thumbnail fails to load: Falls back to the image glyph.
Long file name: Cut in the middle so the extension stays.

9 props

Attachment state: 'idle' | 'uploading' | 'processing' | 'done' | 'error' default 'done'
Attachment size: 'default' | 'sm' default 'default'
AttachmentProgress value, label: number, string
AttachmentGroup layout: 'wrap' | 'scroll' default 'wrap'
AttachmentDrop variant: 'region' | 'zone' default 'region'
AttachmentDrop accept, maxSize, multiple: string, number, boolean default , , true
AttachmentDrop onFiles, onReject: (files) => void, (rejections) => void
AttachmentDrop paste: boolean default false
AttachmentDrop dragState: 'accept' | 'reject'

15 tokens