Overlays & feedback
Dialogs, sheets, popovers and tooltips, plus alerts, progress and loading.
Dialog
For a short task that needs the person’s full attention, like editing one record.
Order #4479, Marguerite Lowe
3 Mill Row, Hollin Bridge, MA 01749
Alert dialog
For a confirmation that can’t be undone. It only closes when the person picks an answer.
Order #4479, Marguerite Lowe Open
2 items, $43.50
Draft note to Tomasz: “Pot on the witch hazel cuttings before Friday.”
Sheet
For details that sit beside the page, like an order opened from a list.
Drawer
A sheet from the bottom edge that can be dragged shut. Best on phones.
Hellebore ‘Ice n’ Roses’
2 L pot, $18.50. 38 in the shade house.
Popover
For a small panel tied to one control: a note, a quick setting, a filter.
#4474, Thursday, October 22, Van 1
Note: Leave by the side gate if nobody is in.
Hover card
A preview of a person or record behind a link. Keep anything essential out of it: touch screens never see it.
#4475 packed by Priya Ramaswamy on Wednesday, October 21 at 3:05 PM, checked by Nell Okafor.
Tooltip
Names an icon button. One short line, never anything the person must read to finish a task.
Sonner
A toast confirms something that already happened and offers a way back. Errors stay up longer.
Order #4474: out for delivery
Alert
A message that stays on the page until the problem is gone. Not for confirmations; use a toast.
Progress
For a task with a known size. Say what is happening and how far along it is.
Stock take, Tuesday, October 20
0 of 1,284 plants
Packing #4481 for collection
3 of 4 items
Skeleton
Holds the shape of content that is on its way, so the page doesn’t jump when it lands.
Spinner
For a short wait with no known length. Put it in the button that started the work, with a label.
Checking the tree row for witch hazel…