Ask AI
English EN
Go to Watbot
Open as markdown The page text without formatting Open in ChatGPT Ask a question about this page Open in Claude Ask a question about this page Connect to Cursor Help center MCP server in one click Connect to VS Code Help center MCP server in one click How to connect the help center to AI

Screens and overlays

The person sees these blocks on the phone. A "Screen" opens in place of the previous one and goes into the "back" stack. Overlays — a menu, a modal, an alert, an action sheet and a toast — are shown over the current screen and close without taking the person away from it.

  • Only a "Screen" (or the utility "Start" block) can be the start block. An overlay cannot.
  • A new screen closes an open overlay.
  • A screen, a menu and a modal have their own page with elements inside — the elements' exits become the block's exits. An alert, an action sheet and a toast have buttons instead of a page, and each button is a separate exit.
  • The buttons of an alert, an action sheet and a toast are set up the same way: "Button name" and "Role" — "Default", "Cancel", "Destructive".
Screen The "Screen" block — an app screen with a header, content, a grid or bottom tabs; its exits are buttons, rows and other tappable elements. Menu The "Menu" block — a side menu over the current screen with its own elements; side, opening style, swipe from the edge, background color and width. Modal The "Modal" block — a window with its own elements over the screen, as a window or a bottom sheet; sheet height, closing and dimming. Alert The "Alert" block — a small window with a header, text and buttons over the screen; each button is a separate exit. Action sheet The "Action sheet" block — a list of actions with icons sliding up from the bottom of the screen; each button is a separate exit. Toast The "Toast" block — a pop-up bar over the screen that fades by itself and does not stop the scenario; text, display time, position, color and buttons.