Pick an overlay by how much attention the moment deserves:
| Component | Blocks the page | Use it for | BookNest example |
|---|---|---|---|
| Toast | No | Short confirmation | "Link copied" |
| Notification | No | News with a source | "Added to your cart" |
| Dialog | Yes | A question that needs an answer now | Clear cart? |
| Action sheet | Yes | Actions on the current item | Book menu |
| Popover | Yes, lightly | Few options tied to a control | Share |
| Sheet modal | Partly | A summary above the page | Mini cart |
| Popup | Yes | A separate task or document | About BookNest |
| Panel | Partly | Navigation or settings at an edge | Filters |
| Login screen | Yes | Sign-in before continuing | Checkout sign-in |
Avoid stacking a modal on a modal, keep destructive choices behind a confirm or an action sheet, and make modals routable when users may want to return to them: a URL survives a reload, app.popup.open() does not.