Drop zone
Also called: dropzone, file drop area, drag and drop upload, upload area.
An area where you can drag a file and let go to upload it. It changes while a file is over it (a solid border and a tint), so you know it will accept the drop.
On a desktop, drag any file onto the box (nothing is uploaded). The box changes while something is over it, then accepts the drop.
Idle
Say it in a prompt
Add a drop zone: a box with a 2px dashed gray border, an up arrow and "Drop a folder here to deploy". While a file is dragged over it, make the border solid accent color, tint the background and say "Let go to upload"; after the drop, show the file name and a progress bar, then "Deployed". Seen on
- Vercel: The hero says "Drop to deploy": you can drag a project folder onto it, and the text changes while you drag and while it loads.
You might describe it as
- drag my folder onto the page and it says drop to deploy
- dashed box where I drag files
- area that lights up when I drag a file over it
Not to be confused with
- Empty state
A drop zone is waiting for you to drag a file onto it; an empty state tells you there is nothing here yet.